在 React 中重置表单输入值答案

【问题标题】：Reset form input values in React在 React 中重置表单输入值
【发布时间】：2019-03-01 10:30:10
【问题描述】：

我想使用 with 创建一个函数，我可以在不提交的情况下重置表单输入中的值。我尝试在 App Component (resetFormFields) 中创建该函数并将其通过 props 传递给 Form Component。当我想在 onSubmit (e.target.reset()) 上执行此操作时，这很简单，但是当我不得不在与表单不同的元素上执行此操作时却被卡住了。我可以在不将这些值添加到 state 的情况下这样做吗？

应用：

class App extends Component {

state = {
    people: [],
    formMessages: [],
    person: null
};

handleFormSubmit = e => {

    e.preventDefault();

    const form = e.target;
    const name = form.elements["name"].value;
    const username = form.elements["username"].value;

    this.addPerson(name, email);
    form.reset();
};

resetFormFields = () => {
    return;
}

render() {

    return (
        <div className="App">
            <Form formSubmit={this.handleFormSubmit} 
                  reset={this.resetFormFields} />
        </div>
    );
}

表格：

    const Form = props => (
  <form className={classes.Form}
    id="form"
    onSubmit={props.formSubmit}>

    <input autoFocus
        id="name"
        type="text"
        defaultValue=""
        placeholder="Name..."
    />
    <input
        id="email"
        type="text"
        defaultValue=""
        placeholder="Email..."
    />
    <Button
        btnType="Submit"
        form="form"
        type='submit'>
        Submit
    </Button>
    <label onClick={props.reset}>Reset fields</label>
</form> );

【问题讨论】：

标签： javascript reactjs forms

【解决方案1】：

onHandleFormSubmit = (e) =>{  
    e.preventDefault();
    e.target.reset();
}

【讨论】：

这似乎是最简单且有效的方法。谁能解释为什么这不是最佳答案以及为什么其他使用 state 设置值的人更合法？如果没有，那么这很容易。
老实说，当另一个 setState 不工作时，这对我有用。感谢分享 Abito！
我认为这是最好的答案，因为它无需使用状态即可重置表单。

【解决方案2】：

您需要通过传递您存储在state 中的值来控制您的输入，然后您只需重置状态值并重置您的组件值。

查看下面的示例

handleInputChange = (e) => {
    let { name, value } = e.target;
    this.setState({
      ...this.state,
      inputs: {
      [name]: value
      }
});

}

你的组件现在看起来像

<input name='fullName' value={this.state.inputs.fullName} onChange={this.handleInputChange} />

您的重置功能只会清除状态，并且您的输入字段将为空，因为它是通过 state 控制的

resetInputFields = () => {
   this.setState({ inputs: {} })
}

【讨论】：

【解决方案3】：

您应该根据组件状态设置输入值，然后只需更新组件状态

class App extends Component {

state = {
    people: [],
    formMessages: [],
    person: null,
    name: "",
    email: "",
};

updateState = (newState) => {
    this.setState(newState);
}

handleFormSubmit = e => {

    e.preventDefault();

    this.addPerson(this.state.name, this.state.email);
    form.reset();
};

resetFormFields = () => {
    this.setState({name:"", email: ""});
}

render() {

    return (
        <div className="App">
            <Form formSubmit={this.handleFormSubmit}  updateState={this.updateState}
                  reset={this.resetFormFields} email={this.state.email} name={this.state.name} />
        </div>
    );
}

然后

const Form = props => (
  <form className={classes.Form}
    id="form"
    onSubmit={props.formSubmit}>

    <input autoFocus
        id="name"
        type="text"
        defaultValue=""
        value={this.props.name}
        onChange={(e) => this.props.updateState({name: e.target.value})}
        placeholder="Name..."
    />
    <input
        id="email"
        type="text"
        defaultValue=""
        value={this.props.email}
        onChange={(e) => this.props.updateState({email: e.target.value})}
        placeholder="Email..."
    />
    <Button
        btnType="Submit"
        form="form"
        type='submit'>
        Submit
    </Button>
    <label onClick={props.reset}>Reset fields</label>
</form> );

【讨论】：

确实它可能不像纯粹的重置那样“神奇”，但更灵活且对 React 更友好。