これが私render
のコンポーネントの方法FormEl
です。
return <div>
<button type="button" onClick={this.clicked}>click to add 1 input</button>
<Inputs count={this.state.childcount}/>
</div>
メソッドでは、を使用して 1clicked
で更新しますchildcount
setState
これがInputs
クラスです
class Inputs extends React.Component {
constructor(props) {
super(props);
console.log("Input constructor is running.");
this.state = {value: '', p: "p", count: props.count};
}
render() {
let c = [];
for (let i = 0; i < this.state.count; i++) {
c.push(
<div key={"id-" + (i * 10)}>
<input type="text" defaultValue={this.state.value}/>
<p> {this.state.p}</p>
</div>);
}
return <div>
{c}
</div>;
}
}
しかし、childcount
inを更新すると、 inが再レンダリングされ、それに応じて inが増加clicked
することがわかります。ただし、初回(ページ読み込み)時以外は呼び出しません。FormEl
count
<Inputs..
constructor
Inputs