Как очистить / сбросить входные данные в форме реакции. js?

Question

Я работаю над проектом React. js. Это проект, основанный на вводе деталей тематического исследования. Я пытаюсь реализовать кнопку отмены, которая очистит ввод и вернет пользователя обратно к первому шагу при вводе данных.

Проблема, с которой я столкнулся, заключается в том, что страница возвращается к первому шагу, но входные данные все еще там.

Детали ввода не очищаются, как показано

В проекте используются API-интерфейсы обработчиков данных, а форма состоит из нескольких компонентов. Это текущий код, который у меня есть для сброса входов. Сброс состояния не сработал.

  handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<Button type = "reset" value = "Reset" onClick={this.handleDetails}>Cancel</Button>

Я прошу прощения, если этот вопрос кажется неполным, это мой первый вопрос, и я попытался следовать рекомендациям. Спасибо!

Answer 1

Вам просто нужно использовать clientName из state как value из этого field input

handleDetails = e => {
    e.preventDefault();
    this.props.handleEnterDetails();
    this.setState({clientName: ''})
  };

<input name="yourInputName" onChange={this.YourHandleChangeMethod} value={this.state.clientName} />
<Button type = "button" onClick={this.handleDetails}>Cancel</Button>

Answer 2

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