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: []
    };

这＆＃34;建议＆＃34;阵列。

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

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 />组件代码。

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

1 个答案: