Сброс входных значений формы в React

Question

Я хочу создать функцию с помощью я могу сбросить значение в форме ввода без отправки.Я попытался создать эту функцию в компоненте приложения (resetFormFields) и передать ее на подпорки компоненту формы.Это просто, когда я хочу сделать это onSubmit (e.target.reset ()), но я застрял, когда мне нужно сделать это без отправки, на элементе, отличном от формы.Можно ли сделать это, не добавляя эти значения в состояние?

Приложение:

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

Answer 1

Вам нужно управлять входами, передавая значение, которое вы храните в вашем 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: {} })
}

Answer 2

вы должны задать свои входные значения на основе состояния компонента, затем просто обновить состояние компонента

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