Question

从最外面到最里面，我有三个部分：App => Welcome => SearchBar。在App和SearchBar中定义了一个状态，但是我想要的是在SearchBar中获取用户输入的数据并将其显示在“结果”页面中。因此，我正在尝试更新SearchBar中的状态，并同时更新App中的状态，以便我可以将该数据传递到{{1}的子元素中}（例如App）。我有以下代码，但它仅更新Results中的状态，而不更新SearchBar中的状态。

（我看过一些例子，其中孩子（在这种情况下为App）没有自己的状态，但是在这种情况下，由于跟踪用户输入，我认为这是必要的。错了。）

SearchBar

再说一次，我对React还是很陌生，所以这可能不是您应该使用的模式。无论如何，我将对如何最好地解决此问题提出建议。

Answer 1

由于您已经在handleSubmit()中定义了App.js事件处理程序，并将其一直传递到SearchBar.js组件中。您可以通过在SearchBar中为输入标签指定名称道具来推断所需的数据。

class Searchbar extends React.Component {
  state = {
    value: ""
  };

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

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <input
          onChange={this.handleOnChange}
          value={this.state.value}
          name="search"
        />
      </form>
    );
  }
}

然后在App.js handleSubmit处理程序中，将name属性指定为目标，以在输入中获取value。

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
       value: e.target.search.value
    })
  };

这可能会使重新渲染的次数最少。

编辑：

是的，提交表格后，我们可以完全显示一个新组件。我们只需要第二个状态值（如displayResults或displayComponent）的帮助，然后通过使用简单的if-check，我们只需切换要显示的组件即可。查看工作示例：Code Demo

Answer 2

在SearchBar组件中，您应将state的值直接传递给handleSubmit函数，

<form onSubmit={(e)=>{e.preventDefault(); this.props.handleSubmit(this.state.value)}}>

在App组件中，您的handleSubmit函数应该是

handleSubmit(inputValue) {
    this.setState({
      value: inputValue
    });
}

Demo

在React中将状态从子级传递到父级；孩子有单独的状态

2 个答案:

编辑：