0

最近、ReactJS の学習を開始し、単純な多肢選択式の質問を実装しようとしました。スタイルを省略してもすべて正常に動作しますが、セマンティック UI の css ファイルを含めると、正常に動作しなくなります。具体的には、MultipleChoiceAnswer の onChange ハンドラーが呼び出されることはありませんが、他のライフサイクル関数は引き続き適切に機能します。コードは以下です。

Question.js

var React = require('react');

var MultipleChoiceAnswer = React.createClass({
  getInitialState: function () {
    return {isChecked: false};
  },
  componentDidMount: function () {
    console.log('answer mounted');
  },
  handleChange: function (event) {
    console.log('state changed');
    this.setState({isChecked: event.target.checked});
  },
  render: function () {
    var self = this;
    return (
      React.createElement('div', {className: 'field'},
        React.createElement('div', {className: 'ui radio checkbox'},
          React.createElement('input', {type:'radio', name:'answer_', defaultValue:self.props.data.text, defaultChecked: self.state.isChecked, onChange:self.handleChange}),
          React.createElement('label', null, self.props.data.text)))
    );
  }
});

var MultipleChoiceQuestion = React.createClass({
  handleChange: function (event, selected) {
    console.log('stuff changed');
  },
  getInitialState: function() {
    return {};
  },
  componentDidMount: function () {
    console.log('Question mounted');
  },
  handleClick: function(event) {
    console.log('click!');
    this.setState({});
  },
  render: function () {
    var rows = this.props.data.map(function (item) {
      return (
        React.createElement(MultipleChoiceAnswer, {key:item.id, data:item})
      );
    });
    return (
      React.createElement('div', {className: 'ui form', onSubmit: this._onSubmit},
        React.createElement('h3', null, 'What is the correct answer?'),
        React.createElement('div', {className: 'grouped fields'}, rows),
        React.createElement('input', {type:'button', value:'Submit now', onClick:this._onSubmit}))
    )
  },

  _onSubmit: function() {
    console.log('Submitted');
  }
});

module.exports.MultipleChoiceQuestion = MultipleChoiceQuestion ;

Index.ejs 

<!doctype html>
<html>
  <head>
    <title>React Isomorphic Server Side Rendering Example</title>
    <!-- <link href='/semantic.min.css' rel="stylesheet" type="text/css">-->
  </head>
  <body>
    <h1 id="main-title">React Isomorphic Server Side Rendering Example</h1>
    <div id="react-main-mount">
      <%- reactOutput %>
    </div>


    <!-- comment out main.js to see server side rendering -->
    <script src="/jquery-2.1.3.min.js"></script>
    <script src="/semantic.min.js"></script>
  <script>
  $(document).ready(function () {
    $('.ui.checkbox').checkbox();
  });
  </script>
    <script src="/main.js"></script>
  </body>
</html>

助けていただけますか？単純なラジオボタンが機能しないのはばかげています >.>

4

1 に答える 1

0

私はそれを働かせました。回答コンポーネントの代わりに質問コンポーネントへの変更ハンドラーを削除し、回答コンポーネントの各入力に defaultChecked および defaultValue プロパティを与えました。これら 2 つのプロパティは、それを機能させるための重要な要素でした。

var React = require('react');

var MultipleChoiceAnswer = React.createClass({
  getInitialState: function () {
    return {isChecked: false};
  },
  componentDidMount: function () {
    console.log('answer mounted');
  },
  render: function () {
    return (
      React.createElement('div', {className: 'field'},
        React.createElement('div', {className: 'ui radio checkbox'},
          React.createElement('input', {type:'radio', name:'answer', id:'answer_' + this.props.id, defaultChecked:false, defaultValue:this.props.data.text}),
          React.createElement('label', {htmlFor:'answer_' + this.props.id}, this.props.data.text)))
    );
  }
});

var MultipleChoice = React.createClass({
  handleChange: function (event, selected) {
    console.log('Selected value: ', event.target.value);
  },
  getInitialState: function() {
    return {};
  },
  componentDidMount: function () {
    console.log('Question mounted');
  },
  render: function () {
    var rows = this.props.data.answers.map(function (item) {
      return (
        React.createElement(MultipleChoiceAnswer, {key:item.id, data:item, id:item.id})
      );
    });

    return (
      React.createElement('div', {className: 'ui form', onSubmit: this._onSubmit},
        React.createElement('div', {className: 'grouped fields', onChange:this.handleChange},
        React.createElement('label', null, 'What is the correct answer?'),
        rows),
        React.createElement('input', {type:'button', value:'Submit now', onClick:this._onSubmit}))
    )
  },

  _onSubmit: function() {
    console.log('Submitted');
  }
});

module.exports.MultipleChoice = MultipleChoice;
于 2015-07-06T19:18:13.783 に答える