Reagire modulo con l'evento
Questa sezione discuterà come utilizzare le forme a reagire.
È un esempio di una semplice
Nell'esempio abbiamo impostato il valore delvalore di ingresso casella di immissione = {} this.state.data.Quando il valore di immissione cambia possiamo aggiornare lo stato. Possiamo usare l'eventoonChange per ascoltare cambiamenti di input e modificare lo stato.
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
Il codice di cui sopra renderà un valore di Ciao w3big! Elemento di input, e aggiornato in risposta all'input utente Valori evento onChange.
esempio 2
Nell'esempio seguente vi mostrerò come utilizzare nel modulo a sottogruppo. MetodoonChange attiva un aggiornamento e aggiornare il valore di stato viene trasmesso alla casella di input sottogruppo dell'interfaccia Valoresu re-rendering.
È necessario il componente principale viene trasmessa al sub-assemblaggio con la creazione di un gestore di eventi(handleChange), e come un puntello(updateStateProp).
var Content = React.createClass({ render: function() { return <div> <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> <h4>{this.props.myDataProp}</h4> </div>; } }); var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
reagire evento
I seguenti esempi dimostrano di modificare i dati attraverso l'evento onClick:
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <button onClick={this.handleChange}>点我</button> <h4>{value}</h4> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
Quando è necessario aggiornare lostato del sub-assemblaggio componente principale, è necessario componente principale con la creazione di un gestore di eventi (handleChange),e consegnato alla vostra sottoassieme comeprop(updateStateProp). Esempi sono i seguenti:
var Content = React.createClass({ render: function() { return <div> <button onClick = {this.props.updateStateProp}>点我</button> <h4>{this.props.myDataProp}</h4> </div> } }); var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'Hello w3big!'}; }, handleChange: function(event) { this.setState({value: '本教程'}) }, render: function() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );