Не удается сбросить поля ввода после отправки формы в React

Question

У меня есть форма с полями ввода.После отправки формы поля ввода необходимо очистить.Я попытался установить состояние пустого массива - это не сработало, затем я попытался использовать refs - у меня тоже не сработало ...

Эта функция активирует событие onSubmit.

addHaspInfo = (e) => {  
 // e.preventDefault();  
    axios.post("/hasp", {
      company: {
            name: e.target[3].value,
            city: e.target[4].value,
            phone: e.target[5].value
            },
            numberOfKeys: e.target[2].value,                      
            serial: e.target[0].value,
            soft: e.target[1].value,
      })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      })
      axios.get("/hasp") 
      .then((haspData) => {
        console.log(haspData.data);
        this.setState({
          hasps: haspData.data
        });
      }); 
      this.setState({
          hasps: []      //this don't reset input fields
        });        
  }

<form id="formId" className="form-group haspAddForm" onSubmit={this.addHaspInfo}>

И это тоже не сработало:

 clearInput = () => {
        this.setState({hasps: []});
        ReactDOM.findDOMNode(this.refs.myInput).focus();  //this don't reset input fields
       } 

<button onClick={this.clearInput} className="btn btn-primary" type="submit"  style={{marginBottom:'40px', marginRight: '110px'}}>Add new hasp info</button> 

Одно из полей ввода

<input ref="myInput" type="text" className="form-control" value={this.state.serial} placeholder="00000-00000" required /><br />

Answer 1

Значение вашего ввода this.state.serial. Чтобы сбросить входное значение, вы можете установить свойство 'serial' для состояния в пустую строку.

Пример:

this.setState({ serial: "" })

В вашем коде вы устанавливаете свойство hasp в пустой массив. Но вы не используете это свойство в своем поле ввода. Таким образом, сброс этого свойства не имеет никакого эффекта. Вам нужно сбросить в своем состоянии все свойства, которые вы используете в value опорах входных данных в вашей форме.

Я предлагаю вам прочитать https://reactjs.org/docs/forms.html, чтобы понять, как формы реагируют на реакцию.

В функции отправки вы можете получить значения из состояния. Нет необходимости использовать e.target массив. Это оставляет код запутанным.

Лучший подход к реагированию - это использование контролируемых входов. Вы можете увидеть: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

Answer 2

Попробуйте

clearInput = ()=>{
  this.setState({...this.state,
                  serial: ""
                })
  }

Это способ сброса полей ввода. Распространение в состоянии, затем установите состояние, которое представляет значение полей ввода для пустых строк.