0

これが私renderのコンポーネントの方法FormElです。

return <div>
            <button type="button" onClick={this.clicked}>click to add 1 input</button>
            <Inputs count={this.state.childcount}/>
        </div>

メソッドでは、を使用して 1clickedで更新しますchildcountsetState

これが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>;
    }
}

しかし、childcountinを更新すると、 inが再レンダリングされ、それに応じて inが増加clickedすることがわかります。ただし、初回(ページ読み込み)時以外は呼び出しません。FormElcount<Inputs..constructorInputs

4

3 に答える 3