別のコンポーネントの状態を介して入力値に反応します

Question

私はレシピアプリケーションを構築しています。現在、レシピを追加するときにポップアップボックスが表示されます。このポップアップでは、レシピを追加することを確認したら入力を保存したいと思っています。私はバリューイベントのターゲットメソッドを調べましたが、このポップアップボックスの状態は上位のコンポーネント（メインのアプリケーションコンポーネント）を介してアクセスされているため、動作させるのが難しいと思います。

GitHubのリンク：https://github.com/jeffm64/recipe-box2/tree/master/src/components

これは、私は現在、試してみて、それを動作させるために持っていますが、これはもはや来るポップアップボックスにつながるものです。これはhandleChangeと一緒にメインのアプリコンポーネント状態です：

getInitialState: function() { 
     return { 
      recipes: [], 
      addRecipeVisibility: false, 
      editRecipeVisibility: false, 
      value: "" 
     }; 
}, 

handleChange: function(event) { 
     this.setState({value: event.target.value}); 
}, 

これはポップアップボックスの入力JSXです：

<input type="text" value={this.state.value} onChange={this.props.handleChange} /> 

Answer 1

私は私が正しくあなたの質問を得たかどうかわからないんだけど、私は意志あなたに答えを与えてください。

現在のコンポーネントの状態を入力に渡そうとしています。私が見る限り、あなたは国家を定義していません。コンストラクタを使用し、デフォルトの状態を作成します。

これで、this.state.valueを入力に渡すことができます。

また、入力の変更が親コンポーネントによって処理され、そのコンポーネントの状態に格納されている場合は、その値を子コンポーネントの小道具として渡す必要があります。この場合、コンストラクタは必要ありません。