React.jsを使用して、テキストボックスを含むhtmlテーブルを動的に作成しています。ボタンをクリックするだけで削除できる行があります。最初の行で[削除]をクリックすると、行1が削除された状態でテーブルが再レンダリングされると思います。ただし、reactがテーブルを再描画すると、state
オブジェクトの実際の値を使用するのではなく、常にテーブルの最後の行がDOMから削除されるように見えます。おそらく私はバグを見つけましたか?これが私のコードです:
/** @jsx React.DOM */
var MyApp = React.createClass({
getInitialState: function () {
return {
col_one: ['c1r1', 'c1r2', 'c1r3'],
col_two: ['c2r1', 'c1r2', 'c1r3'],
col_three: ['c3r1', 'c3r2', 'c3r3']
}
},
handleCellChange: function (colName, index, e) {
console.log('onChange:', colName, index, e.target.value);
},
handleRemove: function (i) {
var that = this;
console.log('removing row:',i);
_.forEach(this.state, function (val, colName) {
that.state[colName].splice(i,1); // BUG???
//_.pullAt(that.state[key], i); // doesn't work either
});
console.log(this.state);
this.setState(this.state);
},
render: function() {
var that = this,
rows = [],
cols = _.keys(this.state);
rows.push(
<tr>
{cols.map(function (col) {
return (
<th>{col}</th>
)
})}
</tr>
)
for (var i = 0; i < this.state[cols[0]].length; i++) {
rows.push(
<tr>
{cols.map(function (col) {
return (
<td>
<input type="text" defaultValue={that.state[col][i]} onChange={that.handleCellChange.bind(that, col, i)} />
</td>
)
})}
<td>
<button onClick={this.handleRemove.bind(this, i)}>Remove</button>
</td>
</tr>
)
}
return (
<table>
<tbody>
{rows}
</tbody>
</table>
);
}
});
React.renderComponent(<MyApp />, document.body);
使用しているdefaultValue
-これは入力を制御されていないコンポーネントにします。これは初期値が設定されますが、コンポーネント全体を吹き飛ばさない限り(たとえば、コンポーネントkey
または祖先を変更して)、表示された値がReactによって再び変更されることはありません。ゼロから再作成します。
新しいものdefaultValue
が表示されないのはそのためです-各行に一意のキーがないため、Reactは再レンダリング時に行が1つ少ないことを検出し、実際のDOMから最後の行を削除しますdefaultValue
が、保持されている入力の新しいものはすべて削除します行は効果がありません。
これは同じコードですが、を使用してvalue
、再レンダリング時に取得した新しいものを反映する制御されたコンポーネントvalue
になります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加