输入复位响应

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。使用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>