功能外的呼叫事件

Question

我需要调用change这是MYSELECT在$(document).on('click', '.changeSetting', function(e) ..我改变了下拉值，但它亘古不变的通话change event..it只需设置一个值。 。是否有遗漏或任何错误？

<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组件上的函数，则可以在使用componentDidMount回调呈现该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();

您将有比赛条件。 如果尚未安装该组件，则需要等待它完成。

这是一个例子 。 我无法让自己包括jquery。

Answer 2

请使用以下代码，希望对您有用：

$( document ).ready(function(){
    $("body").on('click', '.changeSetting', function(e) {
        console.log('Its working');
    });
});