Question

我想用React创建一个表单。我想出了以下内容：

export class Welcome extends Component {

    constructor(props) {
        super(props);
        this.state = {
            errors: []
        };
    }

    render() {
        return (
            <form className="Welcome">
                <div className="hello">{ this.props.sayHello() } I'm <Link to="/life">Marco</Link>! Welcome to my hood.</div>
                <div className="question-box">
                    <div className="question"><span className="underline" >How much time do you have?</span></div>
                    <input className="minutes" type="text" value={this.props.minutes}
                           onChange={ (e) => this.props.updatePreferences("minutes", e.target.value) }/> minutes. 
                </div>
                <div className="question-box">
                    <div className="question"><span className="underline">What do you fancy?</span></div>
                    <div className="answer">
                        <span className="choice">
                            <input type="checkbox" id="business" defaultChecked={ this.props.interests.business }/>
                            <label htmlFor="business">Business</label>
                        </span>
                        <span className="choice">
                            <input type="checkbox" id="code" defaultChecked={ this.props.interests.code }/>
                            <label htmlFor="code">Code</label>
                        </span>
                        <span className="choice">
                            <input type="checkbox" id="design" defaultChecked={ this.props.interests.design } />
                            <label htmlFor="design">Design</label>
                        </span>
                    </div>{/* end of .answer*/}
                  </div>{/* end .question-box*/}
                <button>Show me magic</button>
                <div className="errors">
                    No error. All good.
                </div>
            </form>
        );
    }
}

onChange函数位于父组件中，该组件也保持状态。但每次调用它们都会重新加载整个组件。整个表单应该在一个单独的组件上，还是我应该为每个输入创建单独的组件？

Answer 1

响应状态变化的React调用渲染函数。因此，如果组件没有收到状态更改事件，则很可能不会重新呈现但不一定。无论如何它可能会重新出现。 ref

使用React组件的表单

1 个答案: