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>

输入复位反应

1 个答案: