Question

我需要在change中调用MYSELECT WHICH为$(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并做出这样的反应，我不建议这样做。但是如果你真的需要从全局上下文调用渲染的反应组件上的函数，你可以在使用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中。

Answer 2

使用以下代码我希望它能为您效劳：

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

在函数之外调用事件

2 个答案: