setState を使用して state の state.item を更新するにはどうすればよいですか?
P粉464208937
2023-08-23 17:35:11
<p>ユーザーが独自のフォームをデザインできるアプリケーションを作成しています。例えば。フィールドの名前と、含める必要がある他の列の詳細を指定します。 </p>
<p>このコンポーネントは JSFiddle として利用できます。 </p>
<p>初期状態は次のようになります: </p>
<pre class="brush:php;toolbar:false;">var DynamicForm = React.createClass({
getInitialState: function() {
var 項目 = {};
items[1] = { 名前: 'フィールド 1'、populate_at: 'web_start'、
同じもの: '顧客名',
autocomplete_from: 'customer_name'、タイトル: '' };
items[2] = { 名前: 'フィールド 2'、populate_at: 'web_end'、
同じもの: 'ユーザー名',
autocomplete_from: 'user_name'、タイトル: '' };
返却商品 };
}、
レンダリング: function() {
var _this = これ;
戻る (
<div>
{ Object.keys(this.state.items).map(関数 (キー) {
var item = _this.state.items[キー];
戻る (
<div>
<PopulateAtCheckboxes this={this}
Checked={item.populate_at} id={key}
Populate_at={data.populate_at} />
</div>
);
}、 これ)}
<button onClick={this.newFieldEntry}>新しいフィールドを作成</button>
<button onClick={this.saveAndContinue}>保存して続行</button>
</div>
);
}</pre>
<p>ユーザーが値を変更したときに状態を更新したいのですが、正しいオブジェクトを見つけるのに苦労しています。</p>
<pre class="brush:php;toolbar:false;">var PopulateAtCheckboxes = React.createClass({
handleChange: 関数 (e) {
item = this.state.items[1];
item.name = '新しい名前';
items[1] = アイテム;
this.setState({アイテム: アイテム});
}、
レンダリング: function() {
var PopulateAtCheckbox = this.props.populate_at.map(function(value) {
戻る (
<={値} のラベル>
<input type="radio" name={'populate_at' this.props.id} value={value}
onChange={this.handleChange} selected={this.props.checked == 値}
ref="populate-at"/>
{価値}
</ラベル>
);
}、 これ);
戻る (
<div className="populate-at-checkboxes">
{populateAtCheckbox}
</div>
);
}
});</pre>
<p><code>items[1].name</code> を更新するには、<code>this.setState</code> をどのように作成すればよいですか? </p>
これを実現するには、
アップデート
不変ヘルパー : p> リーリーあるいは、
リーリーshouldComponentUpdate()
ライフサイクル メソッドの===
を使用してこれに対する変更を検出できるかどうかを気にしない場合は、状態を直接編集して、コンポーネントを強制的に再レンダリングします。これは、オブジェクトを状態から引き出して編集するという点で、@limelightsの回答と実際には同じです。後で編集追加:
単純なコンポーネント通信 react-trainingのレッスンを確認して、状態を保持する親コンポーネントから状態を保持する必要がある子コンポーネントにコールバック関数を渡す方法の例を確認してください。状態変化をトリガーします。
ヘルパー ライブラリを使用せずにこれを行う方法は次のとおりです:
リーリー必要に応じて、ステップ 2 と 3 を組み合わせることができます:
リーリーまたは、すべてを 1 行で実行することもできます:
リーリー注:
items
を配列として作成しました。 OPはオブジェクトを使用しました。ただし、コンセプトは同じです。ターミナル/コンソールで何が起こっているかを確認できます:
リーリー