イベントでフォームを反応させます2024 年の最新の入門チュートリアル。このコースでは イベントに反応, について学習できます。
このセクションでは、リアクトでフォームを使用する方法について説明します。
例では、入力ボックスの入力値= {this.state.data}の値を設定します。 入力ボックスの値が変更した場合、我々は状態を更新することができます。 我々は、入力の変化をリッスンするためにonChangeイベントを使用し、状態を変更することができます。
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') );
上記のコードは!入力要素をこんにちはw3bigの値を描画し、のonChangeイベントユーザーの入力値に応じて更新されます。
次の例では、私はサブアセンブリの形でそれを使用する方法を紹介します。onChangeメソッドは、更新がトリガされ、状態値が値アップ再レンダリングインタフェースの入力ボックスサブアセンブリに送信される更新します。
あなたの親コンポーネントがイベントハンドラ(handleChange)を作成することにより、サブアセンブリに伝達される必要があり、小道具(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') );
以下の実施例は、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') );
あなたが親コンポーネントのサブアセンブリからの状態を更新する必要があるときは、イベントハンドラ(handleChange)を作成することにより、親コンポーネントに必要とし、小道具(updateStateProp)として、あなたのサブアセンブリに配信します。 例としては、次のとおりです:
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') );