Reactjs - 親componend状態が

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 />コンポーネントのコードを更新する必要があり、この

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

に更新します。