Search code examples
node.jsreactjssemantic-uiisomorphic-javascript

ReactJS event does not fire when Semantic-UI css is loaded

I recently began learning ReactJS and tried to implement a simple multiple choice question. Everything works fine if I leave styles out, but if I include semantic-ui's css file, then things stop working properly. Specifically, my onChange handler in MultipleChoiceAnswer is never called, but the other lifecycle functions still work properly. Code is below.

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>

Can you please help? It's stupid that I can't get a simple radio button to work >.>

Solution

  • I got it to work. I removed the change handler to the question component instead of the answer component and gave each input in the answer component a defaultChecked and defaultValue propery. Those two properties were the key things that made it work.

    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;