함수 외부에서 호출 이벤트

MYSELECT에있는 change은 $(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.. 
... 
});

출처

2016-06-29 Dhara

''#field_control ''에서'value = "input"옵션을 가지고 있지 않은 옵션을 어떻게 호출 할 수 있습니까? – Poonam

@ Poonam 나는 그것을 바꿨다. 여기에 쓸 필요가없는 다른 것이었다 .. – Dhara

나는 이것을 정리하는 것이 더 많거나 적은 완전한 재 작성을 필요로 할까 두려워, 나는 반응 튜토리얼을 먼저 보길 권한다. . 또한 * jquery * 또는 * react 중 하나를 선택하는 것이 좋습니다. – ivarni

는 잘 모르겠어요, 난 그것을하는 것이 좋습니다 않을 것입니다. 그러나 실제로 렌더링 된 반응 구성 요소의 함수를 전역 컨텍스트에서 호출해야하는 경우 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.component.change();

같은 글로벌 window 객체를 통해 기능에 접근. 구성 요소가 아직 탑재되지 않은 경우이를 수행 할 때까지 기다려야합니다.

여기는 example입니다. 나는 jquery를 포함시킬 수 없었다.

출처

2016-06-29 06:26:37 ivarni

정말 고마워요. 작동합니다. – Dhara

사용 나는 그것이 당신을 위해 작동 바랍니다 : 당신이 jQuery를 혼합하고 다음과 같이 반응 할 필요가 결국 어떻게

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

출처

2016-06-29 05:50:41

죄송합니다 .. 내 질문에 .. reactClass에있는'change'를 호출하고 싶습니다. 그러나 값을 dropdown으로 설정하면 호출하지 않습니다. – Dhara

함수 외부에서 호출 이벤트

답변

관련 문제