Question

我想从表单中的这两个输入中获取数据，并将其中一个设置为state.name，将另一个设置为state.option。有没有办法在使用表单提交按钮时设置它们，而不是使用单独的onChange处理程序来设置每个状态？如果没有，那么提交按钮并没有真正做任何事情会感到很尴尬。

   onTextChange(name) {
                this.setState({ name });
                console.log(this.state.name);
            }
            onOptionChange(option) {
                this.setState({ realm });
                console.log(this.state.option);
            }
            onSubmitForm(event) {
                event.preventDefault();
            }

            render() {
            return (
                <div>
                    <h3>Enter Name:</h3>
                        <form onSubmit={event => this.onSubmitForm(event.target.value)}>
                            <input 
                            type="text" 
                            placeholder="Name"
                            value={this.state.name}
                            onChange={event => this.onTextChange(event.target.value)}
                            />
                   Select Option:
                        <select onChange = {event => this.onOptionChange(event.target.value)}>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                        </select>
                        <input type="submit" />
</form>

Answer 1

在React中，您必须控制状态和setState中的表单/输入中发生的事情以进行更改。那是电话Single source of truth

欢迎来到React：）

使用onSubmit为多个输入设置state？

1 个答案: