用于设置任何表单字段的状态的通用事件处理程序

Question

这里我们必须编写三个函数来更改表单所有输入字段的状态，如果我们有更多字段，例如电话和地址，我们必须再编写两个函数来更改这些字段的状态，我想问是否存在有什么方法我们可以只编写一个通用函数来更改此表单的任何字段的状态，而不是为每个表单字段编写单独的函数？

class SignUpForm extends React.Component {
        constructor() {
            super();
            this.state = {
                name: '',
                email: '',
                password: '',

            };
        }

        handleNameChange = (evt) => {
            this.setState({name: evt.target.value});
        }

        handleEmailChange = (evt) => {
            this.setState({email: evt.target.value});
        }

        handlePasswordChange = (evt) => {
            this.setState({password: evt.target.value});
        }
        render(){
            return(
                <form onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        placeholder="Enter Name"
                        value={this.state.name}
                        onChange={this.handleNameChange}
                    />
                    <input
                        type="text"
                        placeholder="Enter email"
                        value={this.state.email}
                        onChange={this.handleEmailChange}
                    />
                    <input
                        type="password"
                        placeholder="Enter password"
                        value={this.state.password}
                        onChange={this.handlePasswordChange}
                    />
                    <button disabled={isDisabled}>Sign up</button>
                </form>
            )
        }

    }

Answer 1

您可以使用以下模式：

handleChange = (type, event) => {
   this.setState({[type]: event.target.value});
}

您可以像这样使用handleChange：

<input
   type="text"
   placeholder="Enter Name"
   value={this.state.name}
   onChange={(event) => this.handleChange('name', event)}
/>