Событие вызова вне функции

Question

Мне нужно позвонить change, КОТОРЫЙ НАХОДИТСЯ В MYSELECT в $(document).on('click', '.changeSetting', function(e) ..I изменил выпадающее значение, но оно не вызывает 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'); 
    }); 
});