onChange가 react 및 select2와 작동하지 않습니다.

Question

jquery select2를 사용하여 선택 상자를 만듭니다. (또한 새로운 반응) 여러 selectbox 내부의 데이터가 변경되면 함수를 호출하려고합니다. onClick과 onBlur는 예상대로 작동하지만 onChange는 아무 것도하지 않습니다. 나는이 문제가 반응이 그것을 어떻게 표현하는지와 관련이 있다고 생각한다. 구성 요소가 렌더링 된 후에 onChange 효과를 추가하면 $('#additional-filters-dropdown').attr('onChange', 'console.log("test")') .onChange도 반응없이 기본 HTML에서 원하는 방식으로 작동합니다. 그리고 반응 요소가 select 대신 입력 필드 인 경우 onChange가 작동하므로 왜 모두 함께 잘 작동하지 않는지 알 수 없습니다.

는 부품

var product_selections = React.createClass({ 
    handleChange: function() { 
     console.log("Selction has been changed!"); 
    }, 
    render: function() { 
     return (
      <div className='row'> 
       <br/> 
       <label htmlFor='product-dropdown'> 
        Product 
        <br/> 
        <select className='js-example-basic-multiple js-states form-control' id='product-dropdown' multiple='multiple' onChange={this.handleChange}> 
        </select> 
       </label> 
      </div> 
     ); 
    } 
}); 

JQUERY 선택 2는

$('#product-dropdown').select2({ 
    data: [1,2,3,4] 
}); 

var React = require('react'); 
var ReactDOM = require('react-dom'); 
ReactDOM.render(<ProductSelections/>, document.getElementById('product-selection-container')); 

뭐든지 app_main.js 반작용 올바른 방향으로 나를 가리킬 수있는 것이 도움이됩니다.

Answer 1

값이 javascript에 의해 업데이트 될 때 onChange 이벤트가 트리거되지 않습니다. 이 경우 Select2.

반응과 함께 jQuery를 사용하는 경우 구성 요소 안에 포함 된 플러그인 설정을 유지해야합니다. 이러한 오래된 질문을 게시

var product_selections = React.createClass({ 
    handleChange: function() { 
     console.log("Selction has been changed!"); 
    }, 

    componentDidMount: function(){ 
     $(this.refs['mySelect']).select2({ 
      change: this.handleChange 
     }); 
    }, 

    render: function() { 
     return (
      <div className='row'> 
       <br/> 
       <label htmlFor='product-dropdown'> 
        Product 
        <br/> 
        <select ref='mySelect' className='form-control' id='product-dropdown' multiple='multiple'> 
        </select> 
       </label> 
      </div> 
     ); 
    } 
}); 

Answer 2

미안하지만, 나도 같은 문제를 해결하기 위해 노력 구글에서 여기에 온 :

그럼 당신은이 componentDidMount 이벤트를 반응하여이 뭔가를 시도 할 수 있습니다.

import React, { Component } from 'react'; 

class EditPhoneNumberContainer extends Component { 

    componentDidMount() { 
     let s = $(".editPhoneLocationSelect"); 
     s.select2({ 
      placeholder: "Select an option", 
      allowClear: true 
     }); 
     s.on("change", this.props.onSelect); 
    } 

    render() { 
     return (
      <div> 
       <div className="ibox-title"> 
        <h5>Edit Phone Number</h5> 
       </div> 
       <div className="ibox-content form-horizontal"> 
        <select className="select2 form-control required editPhoneLocationSelect"> 
         <option></option> 
         <option>Tester</option> 
         <option>Tester</option> 
         <option>Tester</option> 
        </select> 
       </div> 
      </div> 
     ); 
    } 

} 

export default EditPhoneNumberContainer; 

을 그리고 당신은 이런 식으로 렌더링 것 : 여기 나를 위해 노력하고 업데이트 된 예제가

<EditPhoneNumberList onSelect={this.numberSelected.bind(this)} /> 

numberSelected가 선택한 항목을 처리해야하는 기능입니다.