javascript - 在React中重置表单输入值(Reset form input values in React)

Question

I want create a function using with i can reset value in form inputs without submit.

(我想创建一个函数，我可以在不提交的情况下重置表单输入中的值。)

I tried create that function in App Component (resetFormFields) and pass it on props to Form Component.

(我尝试在App Component（resetFormFields）中创建该函数，然后将其通过props传递给Form Component。)

It's preety simply when I want to do this onSubmit (e.target.reset()) but I got stuck when I have to do it without submit, on a different element than the form.

(当我想在onSubmit（e.target.reset（））上执行此操作时，这是很可爱的，但是当我必须在不提交的情况下执行此操作时，却陷入了与表单不同的元素上。)

Can I do that without adding these values to state?

(我可以不添加这些值来声明吗？)

App:

(应用程式：)

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

Form:

(形成：)

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

  ask by sosick translate from so

Answer 1

You need to make your inputs controlled by passing the value you store in your state then you just have to reset the state values and your component value resets.

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

check this sample below

(在下面检查此样本)

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

}

(})

your component will now look like

(您的组件现在看起来像)

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

Your reset function will just clear the state and your input field will be empty since it's controlled via state

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

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