javascript - 输入重置 react

Question

我正在开发一个 React 应用程序。在提交表单后，我正在谈论表单中的两个输入，我的字段没有重置。如何做那些。我附上了我的表单组件代码，谁能帮我解决这个问题。

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。使用 event.target 从中获取原生 dom 元素，然后调用 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>