javascript - 函数外调用事件

Question

我需要调用change哪个在 MYSELECT在$(document).on('click', '.changeSetting', function(e) ..我更改了下拉值，但它没有调用 change事件..它只是设置了一个值..是否缺少某些内容或有任何错误？

<i className="fa fa-pencil changeSetting" title="Change control"></i>

let addOptionClick = 0;
            var MySelect = React.createClass({
                getInitialState: function() {
                    return {
                        label: '' ,
                        options:  ['text', 'text', 'text']
                    }
                },
                change: function(event) {
                    this.state.label = '';
                    this.setState({value: event.target.value});  
                    addOptionClick = 0;
                    this.setState({options: ['text', 'text', 'text']});
                },                      
                render: function() {                                       
                    return(
                        <div>
                          <p><b>Field type</b></p>
                            <select className="inputControl" id="field_control" onChange={this.change} value={this.state.value}>                        
                                <option value="text" defaultValue>Textbox</option>
                                <option value="number">Number</option>
                                <option value="checkbox">Checkbox</option>
                                <option value="radio">Radio</option>
                                <option value="textarea">Textarea</option>
                                <option value="select">Dropdown</option>
                                <option value="date">Date</option>
                                <option value="email">Email</option>
                            </select>
                        <br />
                        <br />
                        <div id="selectOption" style={{display: 'none'}}>
                            <p>
                              <b>Choices</b>
                            </p>
                            <div id="SelectChoice" onChange={this.fillSelectOption}>
                                {
                                    this.state.options.map(function(opt, i) {
                                       $('#SelectChoice input').last().focus();
                                       return <input type={ opt } className="inputControl space" key={i} autoFocus/>
                                    })
                                }
                                <i className="fa fa-plus-circle icon add" title="Add another choice" onClick={this.addOption} id="add_choice"></i>
                            </div>
                        </div>
                     </div>
                );
            }, ...



$(document).on('click', '.changeSetting', function(e) {
...
$("#field_control").val("select"); // I AM CHANGING DROPDOWN VALUE BUT DOESNOT CALL `CHANGE` FUNCTION 
$("#field_control").change(); //this also doesn't work..
...
});

Answer 1

我不确定你是如何最终不得不混合 jquery 并像这样使用react的，我不建议这样做。但是，如果您确实需要从全局上下文中调用渲染的 React 组件上的函数，您可以在渲染后使用 componentDidMount 回调存储对它的引用。

使用 ES6 的示例:

class Component extends React.Component {
  componentDidMount() {
    window.component = this;
  }

  change() {
    document.write('no, really');  
  }

  render() {
    return (      
      <h1>Please don't do this</h1>      
    );
  }
}

然后通过全局 window 对象访问函数，如下所示

window.component.change();

你将面临竞争条件。如果组件尚未安装，您将需要等待它安装。

这是一个example 。我无法让自己包含 jquery。