功能外的呼叫事件

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');
    });
});