Реакция - не позволяет событию формы onChange устанавливать родительское состояние, пока не будет нажата клавиша Enter

Question

Дочерний класс Search имеет форму ввода, которая ожидает какую-то строку для поиска (например: некоторая область в городе).Родительский компонент App сохраняет искомое значение в состоянии, чтобы передать его в качестве реквизита другому методу (компонент Map).

Проблема: когда я начинаю вводить в форму поиска, searchedValue немедленно обновляется в родительском (obv из-за onSearchedInputChange метода`) -

как заставить форму ждать, пока я нажму Enter, прежде чем обновлять родительское состояние?

App.js (родительский)

class App extends React.Component {
  state = {
    searchedValue: "",
    searchedResponse: null
  };

handleSubmit = e => {
    e.preventDefault();
    ...
  };

  onSearchedInputChange = searchedValue => {
    this.setState({
      searchedValue: searchedValue
    });
  };

Search.js (дочерний)

class Search extends Component {
  handleSubmit = e => {
    this.props.handleSubmit(e);
  };
  // pass callback to parent with searched field
  handleSearch = e => {
    if (e.key === "Enter") {
      this.props.onSearchedInputChange(e.target.value);
    }
  };

  render() {
    const searchedValue = this.props.searchedValue;
    return (
      <div className="search">
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId="searchForm" className="search-form">
            <InputGroup>
              <InputGroup.Prepend>
                <FontAwesomeIcon icon={faSearch} className="search-icon" />
              </InputGroup.Prepend>
              <Form.Control
                className="search-input"
                type="text"
                placeholder="Enter street or area..."
                value={searchedValue}
                name="search"
                onChange={this.handleSearch}
              />
            </InputGroup>
          </Form.Group>
        </Form>
      </div>
    );
  }
}

Answer 1

Во-первых, вы должны сохранить входное значение в дочернем состоянии, затем передать его, после этого ключевого события дескриптора проверить, нажата ли кнопка ввода, затем передать дочернее состояние searchTerm родительскому классу с помощью двухсторонней привязки.Поэтому после того, как вы закончите ввод текста, текст будет сохранен в состоянии searchTerm, когда вы нажмете Enter, затем вызовите функцию из подпорки и передадите searchTerm в родительский класс.

Это код:

class Search extends Component {
  state = {
    searchTerm: ""
  };

  handleSubmit = e => {
    this.props.handleSubmit(e);
  };

  handleSearch = e => {
    this.setState({ searchTerm: e.target.value });
  };

  handleKeyPress = e => {
    if (e.key === "Enter") {
      this.props.onSearchedInputChange(this.state.searchTerm);
    }
  };

  render() {
    return (
      <div className="search">
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId="searchForm" className="search-form">
            <InputGroup>
              <InputGroup.Prepend>
                <FontAwesomeIcon icon={faSearch} className="search-icon" />
              </InputGroup.Prepend>
              <Form.Control
                className="search-input"
                type="text"
                placeholder="Enter street or area..."
                value={this.state.searchTerm}
                name="search"
                onChange={this.handleSearch}
                onKeyPress={this.handleKeyPress.bind(this)}
              />
            </InputGroup>
          </Form.Group>
        </Form>
      </div>
    );
  }
}