0

我最近开始学习 ReactJS 并尝试实现一个简单的选择题。如果我不考虑样式，一切都会正常工作，但如果我包含语义用户界面的 css 文件，那么事情就会停止正常工作。具体来说，我在 MultipleChoiceAnswer 中的 onChange 处理程序永远不会被调用，但其他生命周期函数仍然可以正常工作。代码如下。

问题.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 ;

索引.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 属性。这两个属性是使它工作的关键。

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 回答