#このチュートリアルの動作環境: Windows7 システム、React16 バージョン この方法は、すべてのブランドのコンピューターに適しています。 関連する推奨事項: "react サブコンポーネントが親コンポーネントに値を渡すメソッド: state の初期値と状態を処理する関数を親コンポーネントに設定し、関数名をサブコンポーネントに渡します。 props 属性値の形式であり、子コンポーネントが親コンポーネントの関数を呼び出すことにより状態変化を引き起こし、子コンポーネントの変化を親コンポーネントに表示する。
React ビデオ チュートリアル "
子コンポーネントは自身の状態を制御し、親コンポーネントに自身の状態を伝え、親を呼び出す必要があります。 props を介したコンポーネント. 状態を制御し、親コンポーネント内の子コンポーネントの状態変化を表示する関数。/***实现在输入框输入邮箱时,在p中即时显示输入内容***/ <body> <p id="test"></p> </body> //子组件 var Child = React.createClass({ render: function(){ return ( <p> 邮箱:<input onChange={this.props.handleEmail}/> </p> ) } }); //父组件 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return ( <p> <p>邮箱:{this.state.email}</p> <Child name="email" handleEmail={this.handleEmail.bind(this)}/> </p> ) } }); React.render( <Parent />, document.getElementById('test') );
原則:
分析:
プログラミング ビデオ コースをご覧ください。 !
以上が反応する子コンポーネントから親コンポーネントに値を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。