Javascript 在React中重置表单输入值

我想创建一个函数，使用with可以重置表单输入中的值，而无需提交。我尝试在应用程序组件（resetFormFields）中创建该函数，并将其传递到props组件中。当我想在submit（e.target.reset（））上执行此操作时，这很简单，但当我不得不在表单之外的其他元素上执行此操作时，我就被卡住了。我可以在不向状态添加这些值的情况下执行此操作吗

应用程序：

类应用程序扩展组件{
状态={
人员：[]，
formMessages:[]，
人：空
};
handleFormSubmit=e=>{
e、 预防默认值（）；
常数形式=e.目标；
const name=form.elements[“name”].value；
const username=form.elements[“username”].value；
此.addPerson（姓名、电子邮件）；
form.reset（）；
};
resetFormFields=（）=>{
返回；
}
render（）{
返回(
);
}

表格：

const Form=props=>(
提交
重置字段
);

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

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>
    );
}

类应用程序扩展组件{
状态={
人员：[]，
formMessages:[]，
人:空,，
姓名：“，
电邮：“，
};
updateState=（newState）=>{
this.setState（newState）；
}
handleFormSubmit=e=>{
e、 预防默认值（）；
this.addPerson（this.state.name，this.state.email）；
form.reset（）；
};
resetFormFields=（）=>{
this.setState（{name:，email:}）；
}
render（）{
返回(
);
}

然后

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> );

const Form=props=>(
this.props.updateState（{name:e.target.value}）}
占位符=“名称…”
/>
this.props.updateState（{email:e.target.value}）
占位符=“电子邮件…”
/>
提交
重置字段
);

您需要通过传递存储在

状态中的值来控制输入

，然后您只需重置状态值和组件值即可

检查下面的示例

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} />

onHandleFormSubmit=（e）=>{
e、 预防默认值（）；
e、 target.reset（）；
}

事实上，它可能不像纯粹的重置那样“神奇”，但更灵活，反应更友好。这似乎是最简单的方法，也很有效。有人能解释为什么这不是最好的答案，为什么其他使用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} />

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