Reactjs - 在子组件更新状态时，父componend状态改变

问题描述：

我是新来reactjs，我有这样的设置：Reactjs - 在子组件更新状态时，父componend状态改变

父组件= 子组件=

父组件：

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

这个“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> 
    ) 
    }

与您的问题没有关系，但如果您确实不真的需要，请不要使用'dangerouslySetInnerHTML'。根据我的理解，您只需传递一个字符串，以便您可以执行'

{title}

'。第二个说明，我可以看到你正在改变标签的状态。这会触发子组件的重新呈现（标记）。 – bennygenel

为您的问题“父状态更改时更新子组件中的状态”您可以将子项作为道具传递给子组件并在子组件中执行它们 –

@bennygenel我需要这样做是因为我在字符串中有HTML标记。 – SempachoO

答

没有必要继续“建议”排列的状态里面<Input />
你最好解除这种状态长达父组件。

，然后更新到这个

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

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

Reactjs - 在子组件更新状态时，父componend状态改变

{title}

相关推荐