Событие ReactJS не срабатывает при загрузке Semantic-UI css

Недавно я начал изучать ReactJS и попытался реализовать простой вопрос с множественным выбором. Все отлично работает, если я оставляю стили, но если я включу css-файл семантики, тогда все перестанет работать правильно. В частности, мой обработчик onChange в MultipleChoiceAnswer никогда не вызывается, но другие функции жизненного цикла все еще работают правильно. Код ниже.Событие ReactJS не срабатывает при загрузке Semantic-UI css

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>

Можете ли вы помочь? Глупо, что я не могу получить простой переключатель для работы>.>

источник

2015-04-25 Mr_Antivius

Можете ли вы воспроизвести проблему без реактивов, то есть используя простые HTML и JS, подобные ситуации с реакцией? Может быть, это длинный выстрел, но если это произойдет без React, это может быть проще отладить. – antinome

Для чего я хочу проверить, что каждый вход радиосигнала имеет уникальный идентификатор и что на каждой метке установлен атрибут «для». Я видел проблемы с семантикой, когда это не так. – antinome

Я получил его на работу. Я удалил обработчик изменений в компонент вопроса вместо компонента ответа и дал каждому входу компонента ответа значение 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-06 19:18:13

Событие ReactJS не срабатывает при загрузке Semantic-UI css

ответ

Смежные вопросы