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

Question

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

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

// App.js
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({
      value: event.target.value
    });
  }

  render() {
    return (
      <Router>
        <div className="AppContainer">
          <Route
            exact
            path="/"
            render={props => <SearchBar handleSubmit={this.handleSubmit} />}
          />
...

// Welcome.js
export default class Welcome extends React.Component {
  render() {
    return (
      <div>
        <SearchBar handleSubmit={this.props.handleSubmit} />
      </div>
...

// SearchBar.js
export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <input
          type="text"
          placeholder="Search..."
          onChange={this.handleChange}
          value={this.state.value}
        />
        <input type="submit" />
      </form>
    );
  }
}

再说一遍，我对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 prop为目标，以获取输入中的value 。

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

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

编辑：

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

Answer 2

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

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

在App组件中， handleSubmit函数应为：

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

演示版