Question

我在React.js中遇到选择标记实现的问题。这就是我所拥有的：

＆＃13;

var ProfessorsFilter = React.createClass({
  getInitialState: function(){
    return(
    {
      visibleDepartments: [],
      selectedSchoolId: 1
    }
    )
  },
  selectSchool: function(event){
    console.log("select school");
    alert("select ");
    this.setState({selectedSchoolId: event.target.value});
  },
   render: function () {
     var schoolOptions = this.props.schools.map(function(school, index){
       return (
           <option key={index} value={school.id}>{school.name}</option>
       );
     });
       return(

                 <select onChange={this.selectSchool} value={this.state.selectedSchoolId} className="select-2">
                   {schoolOptions}
                 </select>

       )
   }
});

＆＃13;

所以，我正在做受控制的组件。但onchange不会激发我的方法selectSchool。编辑： jsfiddle：https://jsfiddle.net/wc02bvaj/ BTW。我也在使用select2。

EDIT2：结果是select2出现了问题。

Answer 1

如果您在相同的DOM元素上使用jQuery和React，通常会导致问题。要么保留React不受管理，使用React等效并删除jQuery，或者在这种情况下，你有几个选项。

最简单的选择是使用https://github.com/rkit/react-select2-wrapper。

或者你可以推出自己的解决方案，例如： Select2自身有一个更改回调。如果您正在使用Redux（它看起来不像您），您可以通过从Select2更改处理程序调度操作来更改状态。您可以通过在ProfessorsFilter中注册处理程序并在那里设置状态来收听jQuery Select2更改事件。

React select onchange不起作用

1 个答案: