单击按钮如何从子组件到父组件获取输入值？

Question

子组件：Autocomplete.js

return (
          <Fragment>
            <input
              type="text"
              placeholder="Enter Locality."
              onChange={onChange}
              onKeyDown={onKeyDown}
              value={this.state.userInput}
            />
            {suggestionsListComponent}
          </Fragment>
        );

在父组件中，我需要从输入字段中单击按钮时获取值，并显示为警报：

<Autocomplete
              suggestions = {[
                "A",
                "B",
                "c",
                "d"
                ]}

                />
              </div>
              <div class="input-field third-wrap">
                <button class="btn-search" type="button" onClick={() => {this.showAlert()}}>
                  Search
                </button>

Answer 1

您可以传递一个方法作为prop，以更新父组件上的值。

在您的子组件上，在您的onChange上，我想您有类似的东西：

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

例如，您可以在setState方法的回调中添加以下内容：

onChange = (e) => {
  this.setState({ value: e.target.value },
  () => {
    this.props.updateValue(this.state.value);
  }); 
}

然后，在父组件上，创建在prop上传递的方法。

updateValue = (alertValue) => {
  this.setState({ alertValue });
}

您必须像这样在道具上传递它：

<Autocomplete
  suggestions = {[...]}
  updateValue={this.updateValue}
/>...rest of code

然后，您的showAlert将提醒this.state.alertValue。

希望这会有所帮助：）