Сброс входа в реакции

Question

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

import React, { Component } from 'react';

class Form extends Component {

render() {
    return (
        <form onSubmit={this.props.getWeather}>
            <input type="text" name="city" placeholder="city.." />
            <input type="text" name="country" placeholder="country.." /><br></br>
            <button >Submit</button>
        </form>
    );
}
}

export default Form;

Answer 1

Внутри метода getWeather у вас будет доступ к искусственному объекту события React, скажем, event. Извлеките из него нативный элемент dom, используя event.target, а затем вызовите метод reset() как event.target.reset(). Это очистит все входные значения формы.

Играйте с приведенным ниже примером.

function App() {
  const onFormSubmit = e => {
    e.preventDefault();
    e.target.reset();
  };
  return (
    <div className="App">
      <form onSubmit={onFormSubmit}>
        <div>
          <label htmlFor="name">Enter your name: </label>
          <input type="text" name="name" id="name" required />
        </div>

        <div>
          <input type="submit" value="Reset!" />
        </div>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>