Как сбросить значение ввода формы реакции (привязанное к состоянию) с помощью кнопки? - PullRequest
Новая
       5

Как сбросить значение ввода формы реакции (привязанное к состоянию) с помощью кнопки?

0 голосов
/ 18 марта 2020

Как сбросить значение ввода формы реакции (которое связано с состоянием) с помощью кнопки? 

<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>;

Кнопка сброса, которую я реализовал, полностью очищает поле состояния, но не устанавливает значение в ввод ... (по-видимому, он помнит предыдущий)

1 Ответ

0 голосов
/ 18 марта 2020

Обновите состояние до пустой строки вместо null, и оно будет работать.

Проверьте эту ссылку для более подробного объяснения (по крайней мере, это кажется уместным?). Я предполагаю, что, так как реагирует на ввод с null значением как неконтролируемое, оно оставляет текущее значение.

Вот упрощенный пример: 

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"/>
...