ReactJS-当父组件状态改变时更新子组件中的状态

Question

我是Reactjs的新手，我有以下设置：

父组件=子组件=

父组件：

this.state = {
      tags: [],
      activeFilter: {}
    };

和方法：

removeTag = (data) => {
    const newData = this.state.tags.slice();
    const indexToRemove = this.state.tags.indexOf(data);
    newData.splice(indexToRemove, 1);
    this.setState({
      tags: newData
    });
  }

现在，我想在发生父方法时更新子组件内部的状态：

this.state = {
      value: '',
      suggestions: []
    };

此“建议”数组。

这是我的父组件的渲染方法：

render() {

    const {title} = this.props;
    const {tags, activeFilter} = this.state;

    return (
      <div className="search">
        <div>
          <h1 className="search__title" dangerouslySetInnerHTML={{__html: title}}></h1>

          <div className="search__wrapper">
            <form id="SearchForm"
              action="#"
              name="SearchComponent"
              autoComplete="false"
              onSubmit={this.handleSubmit}>

              <ul id="token-list" className="flex">

                {
                    tags.map((item) => (
                        <Tag data={item} key={item.id} removeTag={this.removeTag} />
                    ))
                }

                <li className="flex__input flex--inline flex--grow">
                  <Input onInputUpdate={this.updateCallback} filter={activeFilter} />
                  <button type="submit" className="input-icon">
                    <span className="icon ion-ios-search"></span>
                  </button>
                </li>

              </ul>

            </form>
          </div>
        </div>
      </div>
    )
  }

Answer 1

无需在<Input />保留“建议”数组状态
您最好将此状态提升到父组件。

然后更新到这个

<Input 
  suggestions = {this.state.suggestions}
  onInputUpdate={this.updateCallback} 
  filter={activeFilter} 
/>

而且，当然，您需要相应地更新<Input />组件代码。