очистка ввода после отправки формы - PullRequest
Новая
       9

очистка ввода после отправки формы

0 голосов
/ 24 сентября 2018

Я пытаюсь очистить тег ввода после обновления моего состояния: 

state = {
    formName: '',
    inputs: [],
    tempInput: {
      inputLabel: '',
      inputType: '',
      inputValue: ''
    }
  };

это моя форма: 

  <div className="formG">
        <form className="form-maker" onSubmit={this.handleSubmit}>
          Label:
          <input name="inputLabel" type="text" onChange={this.handleChange} />
          Type:
          <input name="inputType" type="text" onChange={this.handleChange} />
          Value
          <input name="inputValue" type="text" onChange={this.handleChange} />
          Form Name
          <input name="formName" type="text" onChange={this.formName} />
          <button>Submit</button>
        </form>

вот так я справляюсь с изменением 

 handleChange = e => {
    const { name, value } = e.target;
    this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

и я попытался просто очистить tempInput, но он не работает, кто-нибудь знает почему? 

 handleSubmit = e => {
    e.preventDefault();
    const inputs = [...this.state.inputs, this.state.tempInput];
    const { tempInput } = this.state;
    tempInput.inputLabel = '';
    tempInput.inputType = '';
    tempInput.inputValue = '';
    this.setState({ inputs, tempInput });
  };

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

Ваши входные теги не отображают значение вашего состояния.1) извлекать отдельные значения из tempInput 2) использовать значение, сохраненное в вашем состоянии, которое затем обновляется вашим handleChange.3) В вашей функции handleSubmit сбросьте ваши индивидуальные значения и очистите строку.

ваш handleChange должен выглядеть следующим образом: 

handleChange = e => {
     const { name, value } = e.target;
     this.setState([name]: value);
};

ваш jsx должен выглядеть следующим образом: 

<form className="form-maker" onSubmit={this.handleSubmit}>
      Label:
      <input name="inputLabel" value={this.state.inputLabel} type="text" onChange={this.handleChange} />
      Type:
      <input name="inputType" value={this.state.inputType}  type="text" onChange={this.handleChange} />
      Value
      <input name="inputValue" value={this.state.inputType} type="text" onChange={this.handleChange} />
      Form Name
      <input name="formName" value={this.state.formName} type="text" onChange={this.formName} />
      <button>Submit</button>
    </form>
0 голосов
/ 24 сентября 2018

Вы мутируете в исходное состояние.Вы можете скопировать, а затем только установить состояние.Просто измените следующее:

Замените это: 

const { tempInput } = this.state;

На это: 

const { tempInput } = {...this.state}; // copy the state

Кроме того, обязательно свяжите значение состояния вваши входные элементы, такие как этот, делают их управляемым компонентом: 

<input name="inputLabel" type="text" 
  onChange={this.handleChange} 
  value={this.state.tempInput.inputLabel || ''} />

И ваш обработчик должен быть: 

handleChange = e => {
     const { value } = e.target;
     this.setState({value}); 
// now, value will correspond to the controlled component
};

Также будьте осторожны, предложите использовать управляемый компонент насколько это возможно:

В большинстве случаев мы рекомендуем использовать контролируемые компоненты для реализации форм.

0 голосов
/ 24 сентября 2018

Ваша форма является неконтролируемым компонентом, поэтому они не контролируются полями состояния.Вот почему ваш подход не сработал.Вместо этого вы можете сделать e.target.reset(), который очистит всю форму.Но если вы хотите сбросить некоторые входные данные, вы можете получить к ним доступ и установить .value в "", как я показал ниже.

Неконтролируемый компонент работает так же, как элементы формы вне React.Когда пользователь вводит данные в поле формы (поле ввода, раскрывающийся список и т. Д.), Обновленная информация отражается без каких-либо действий React.Однако это также означает, что вы не можете заставить поле иметь определенное значение.С Документ

Таким образом, ваш метод handleSubmit будет выглядеть следующим образом: 

handleSubmit = e => {
  e.preventDefault();
  const inputs = [...this.state.inputs, this.state.tempInput];
  // ....
  // The below will reset entire form.
  // e.target.reset();
  // If you want some of them to empty.
  const { elements } = e.target
  elements['inputLabel'].value = "";
  elements['inputType'].value = "";
  elements['inputValue'].value = "";
};

Проверьте документ HTMLFormElement.elements

...