如何使用按钮重置反应表单输入值（与状态相关）？

Question

How to reset the react form input value (which is tied to a state) with a button?

<Form.Group controlId="availabilityOborotDoc">
  <Form.Label>Documents</Form.Label>
  <Form.Control
    type="number"
    name="availabilityOborotDoc"
    required
    readOnly
    value={this.state.settings.availabilityOborotDoc}
  />
  <Link
    to={{
      pathname: `/ost-docs`,
      state: {
        settings: this.state.settings,
        isSelectDoc: true,
        isEdit: isEdit,
        isCreate: isCreate
      }
    }}
  >
    <Button variant="primary" disabled={isView}>
      Choose document
    </Button>
  </Link>
  <Button
    variant="warning"
    disabled={isView}
    onClick={() => {
      this.setState(prevState => ({
        settings: {
          ...prevState.settings,
          availabilityOborotDoc: null
        }
      }));
      this.forceUpdate();
    }}
  >
    Reset
  </Button>
</Form.Group>;

The Reset button I implemented clears the state field allright but doesn't set the value in input... (apparently it remembers the previous one)

Answer 1

Update the state to an empty string instead of null and it will work.

Check out this link for a little more explanation (at least it seems relevant?). My assumption is that because react treats an input with null value as uncontrolled, it will leave the current value.

Here is a simplified example:

 class Example extends React.Component { constructor(props) { super(props); this.state = { settings: { availabilityOborotDoc: '12345' } } } render() { console.log(this.state.settings) return ( <div> <input readOnly value={this.state.settings.availabilityOborotDoc} /> <button onClick={() => { this.setState(prevState => ({ settings: { ...prevState.settings, availabilityOborotDoc: '' } })); }} > Reset </button> </div> ) } } ReactDOM.render(<Example />, document.getElementById('root'));

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