Reactjs kombinieren alle Zustände zur übergeordneten Komponente

Question

Ich habe eine Komponente, die drei untergeordnete Komponenten hat, die die untergeordneten Zustände an die übergeordneten Komponenten übergeben müssen, damit die Übergabeschaltfläche die Informationen mit allen vom Benutzer ausgewählten Informationen weitergeben kann. Alle HTML-Elemente werden über JSON generiert.

finden Sie meine Mutterkomponente unter:

class ScreenField extends Component { 
    bindNewState(newState) { 
     //this.setState([...this.state,newState]) -- Not Working 
    } 
    render() { 
     return (
      <span> 
       <InputField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/> 
       <LabelField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/> 
       <RadioField screenField={this.props.screenField} handleStateChange={(newState) => this.bindNewState(newState)}/> 
      </span> 
     ) 
    } 
} 

So sollte mein bindNewState Methode alle Staaten kombinieren, die durch seine untergeordneten Komponenten geleitet wird. Unfähig zu wissen, wie man das macht ?? kompletter Code ist an den URL

Answer 1

Sie Bindung nicht funktioniert, können Sie bindNewState wie diese this.bindNewState.bind(this) binden. Auf diese Weise wird der Umfang Ihrer übergeordneten Komponente beibehalten. Sie endgültige Code sieht wie folgt aus:

class ScreenField extends Component { 
    bindNewState(newState) { 
     //this.setState([...this.state,newState]) -- Not Working 
    } 
    render() { 
     return (
      <span> 
       <InputField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/> 
       <LabelField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/> 
       <RadioField screenField={this.props.screenField} handleStateChange={this.bindNewState.bind(this)}/> 
      </span> 
     ) 
    } 
} 

Oder, da sie die gleiche Methode ist, binden Sie binden es im Konstruktor wie folgt aus:

class ScreenField extends Component { 
    constructor(props) { 
     super(props); 
     this.bindNewState = this.bindNewState.bind(this); 
    } 

    bindNewState(newState) { 
     //this.setState([...this.state,newState]) -- Not Working 
    } 
    render() { 
     return (
      <span> 
       <InputField screenField={this.props.screenField} handleStateChange={this.bindNewState}/> 
       <LabelField screenField={this.props.screenField} handleStateChange={this.bindNewState}/> 
       <RadioField screenField={this.props.screenField} handleStateChange={this.bindNewState}/> 
      </span> 
     ) 
    } 
} 

Vergessen Sie nicht, Requisiten in super(), wenn Sie passieren Binden Sie Ihre Methode im Konstruktor.

Answer 2

Es scheint bindNewState Methode nicht zu ScreenField Klasse gebunden ist. tun dies in der constractor

class ScreenField extends React.Component { 

constructor(){ 
    super() 
    this.bindNewState = this.bindNewState.bind(this) 
    } 
}