React wybierz onChange nie działa

Question

JsFiddle: https://jsfiddle.net/69z2wepo/9956/

Wracam do wybierz element w funkcji renderowania w moim kodu react.js.

Ale gdy zmieniam wartość select, funkcja w onChange nie jest wyzwalana.

var Hello = React.createClass({ 
render: function() { 
    return <select id="data-type" onChange={changeDataType()}> 
      <option selected="selected" value="user" data-type="enum">User</option> 
      <option value="HQ center" data-type="text">HQ Center</option> 
      <option value="business unit" data-type="boolean">Business Unit</option> 
      <option value="note" data-type="date">Try on </option> 
      <option value="con" data-type="number">Con</option> 
     </select> 
    } 
}); 


React.render(<Hello/>, document.getElementById('container')); 

function changeDataType() { 
    console.log("entered"); 
} 

Ta funkcja jest wyzwalana tylko raz, gdy wybrana jest załadowana, a następnie, gdy zmienię wartość, nie zostanie ona wywołana.

Answer 1

onChange przyjmuje funkcję.

Przekazujesz go pod numer changeDataType(), który uruchamia funkcję changeDataType i ustawia onChange na wartość zwracaną, która jest pusta.

Spróbuj podać rzeczywistą funkcję, zamiast oceniać funkcję.

<select id="data-type" onChange={changeDataType}>

Answer 2

Funkcje, które wyzwalają gdy zmiany składowe powinny być naprawdę zdefiniowane wewnątrz samego komponentu.

Polecam definiowania funkcji wewnątrz komponentu Hello i przechodząc this.changeDataType do atrybutu onChange, tak:

var Hello = React.createClass({ 
changeDataType: function() { 
    console.log('entered'); 
}, 
render: function() { 
    return <select id="data-type" onChange={this.changeDataType}> 
      <option selected="selected" value="user" data-type="enum">User</option> 
      <option value="HQ center" data-type="text">HQ Center</option> 
      <option value="business unit" data-type="boolean">Business Unit</option> 
      <option value="note" data-type="date">Try on </option> 
      <option value="con" data-type="number">Con</option> 
     </select> 
    } 
}); 

Oto zaktualizowana JSFiddle która produkuje planowanej zachowanie: https://jsfiddle.net/69z2wepo/9958/