React - очистка входного значения после отправки формы

У меня довольно глупая проблема. Я нахожусь в процессе создания моего первого приложения React, и у меня возникла небольшая проблема, из-за которой я не могу очистить свое значение ввода после отправки формы. Я попытался найти эту проблему, нашел несколько похожих тем, но я не смог ее решить. Я НЕ хочу менять состояние моего компонента/приложения, просто чтобы изменить значение ввода на пустую строку. Я попытался очистить значение ввода в моей функции onHandleSubmit(), но получил ошибку:

"Невозможно установить свойство 'значение' из неопределенного".

Мой компонент панели поиска:

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;

Ответы

Ответ 1

У вас есть контролируемый компонент, значение input которого определяется значением this.state.city. Поэтому, как только вы отправите заявку, вы должны очистить свое состояние, которое автоматически очистит ваш ввод.

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({
      city: ''
    });
}

Ответ 2

Поскольку поле ввода является управляемым элементом, вы не можете напрямую изменить значение поля ввода без изменения состояния.

Также в

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

this.mainInput не ссылается на вход, поскольку mainInput - это id, вам нужно указать ссылку на ввод

<input
      ref={(ref) => this.mainInput= ref}
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      value={this.state.city}
      type="text"
    />

В вашем текущем состоянии лучший способ - очистить состояние, чтобы очистить входное значение

onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.setState({city: ""});
  }

Однако, если вы по какой-то причине хотите сохранить значение в состоянии, даже если форма отправлена, вы скорее сделаете вход неконтролируемым

<input
      id="mainInput"
      onChange={this.onHandleChange}
      placeholder="Get current weather..."
      type="text"
    />

и обновить значение в состоянии onChange и onSubmit очистить ввод, используя ref

 onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }

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

Ответ 3

this.mainInput фактически не указывает на что-либо. Поскольку вы используете управляемый компонент (т. this.state.city Значение ввода получается из состояния), вы можете установить this.state.city null:

onHandleSubmit(e) {
  e.preventDefault();
  const city = this.state.city;
  this.props.onSearchTermChange(city);
  this.setState({ city: '' });
}

Ответ 4

В своей функции onHandleSubmit установите свое состояние в {city: ''} следующим образом:

this.setState({ city: '' });

Ответ 5

Приведенные выше ответы являются неправильными, все они будут работать в режиме погоды или не будет успешной отправки... Вам нужно написать компонент ошибок, который будет получать любые ошибки, а затем проверить, есть ли ошибки в состоянии, если нет, то очистите форму....

используйте .then()

Пример:

 const onSubmit =  e => {
e.preventDefault();
const fd = new FormData();
fd.append("ticketType", ticketType);
fd.append("ticketSubject", ticketSubject);
fd.append("ticketDescription", ticketDescription);
fd.append("itHelpType", itHelpType);
fd.append("ticketPriority", ticketPriority);
fd.append("ticketAttachments", ticketAttachments);
newTicketITTicket(fd).then(()=>{
  setTicketData({
    ticketType: "IT",
    ticketSubject: "",
    ticketDescription: "",
    itHelpType: "",
    ticketPriority: ""
  })
})

};