ändert Ich bin neu in reactjs und ich habe dieses Setup:Reactjs - Update Zustand in der Kinderkomponente, wenn Eltern componend Zustand

geordnete Komponente = Kind Component =

Geordnete Komponente:

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

und ein Verfahren:

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

, jetzt würde ich wie wenn die übergeordnete Methode auftritt, um den Status innerhalb der untergeordneten Komponente zu aktualisieren:

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

Diese "Vorschläge" -Array.

Das ist meine Render-Methode von Stammkomponente:

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> 
    ) 
    }

Quelle

2017-09-16 SempachoO

Nicht verwandt mit Ihrer Frage, aber verwenden Sie nicht 'dangerlySetInnerHTML', wenn Sie nicht wirklich wirklich wirklich wirklich brauchen. Aus Ihrem Code, so wie ich es verstehe, übergeben Sie nur einen String, so dass Sie einfach '

{title}

'. Zweite Anmerkung, ich kann sehen, dass Sie Tags im Zustand ändern. Dies löst ein erneutes Rendern für die untergeordneten Komponenten (Tag) aus. – bennygenel

für Ihre Frage "Status in untergeordnete Komponente aktualisieren, wenn sich der Elternstatus ändert" Sie können Funktionen als Requisiten an die untergeordnete Komponente übergeben und in der untergeordneten Komponente ausführen –

@bennygenel Ich benötigte das, weil ich HTML-Tags innerhalb einer Zeichenfolge habe. – SempachoO

keine Notwendigkeit, „Vorschläge“ Array Zustand zu halten innen <Input />
Sie besser diesen Zustand bis zu Elternkomponente heben würde.

und dann aktualisieren, um diese

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

Und natürlich müssen Sie Ihren <Input /> Komponentencode entsprechend aktualisieren.

Quelle

2017-09-16 19:53:59

Reactjs - Update Zustand in der Kinderkomponente, wenn Eltern componend Zustand

{title}

Antwort

Verwandte Themen