Reagieren Kind Komponente Zustand ist undefiniert

Question

ich eine übergeordnete Komponente haben, PlanList:

class PlanList extends Component { 
    constructor(props) { 
    super(props); 
    this.renderPlans = this.renderPlans.bind(this); 
    this.planListFilter = <PlanListFilter onChange={this.handleFilterChange.bind(this)} /> 
    } 

    loadPlans() { 
    console.log(this.planListFilter); 
    // returns: Object {$$typeof: Symbol(react.element), key: null, ref: null, props: Object, _owner: ReactCompositeComponentWrapper…} 

    console.log(this.planListFilter.state); 
    // returns: undefined 
    // I expect it to return the state object i defined in the PlanListFilter constructor 

    // here I would apply the filters to the PlanTable 
    } 

    handleFilterChange(event) { 
    this.loadPlans(); 
    } 

    render() { 
    return (
     <div className="PlanList"> 
     {this.planListFilter} 
     <PlanTable /> 
     </div> 
    ) 
    } 
} 

und ein Kind Komponente, PlanListFilter:

class PlanListFilter extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     search: '', 
    }; 
    this.handleSearchChange = this.handleSearchChange.bind(this); 
    } 

    handleSearchChange(event) { 
    this.setState({search: event.target.value}); 
    this.props.onChange(event); 
    } 

    render() { 
    return (
     <FormControl type="text" placeholder="Search" onChange={this.handleSearchChange} value={this.state.search} /> 
    ); 
    } 
} 

Wenn der Text auf der Formcontrol zu ändern, die onChange Eigenschaft ist wie erwartet abgefeuert, aber im übergeordneten Objekt state des Kindes ist undefined. Ich erwarte, dass es mit dem richtigen Status gefüllt wäre.

Answer 1

In React Daten fließt in eine Richtung, wenn Ihr Elternteil über Änderungen in der untergeordneten wissen sollte, müssen Sie einen Handler als Prop zu dem Kind übergeben, so dass es aus dem Kind aufgerufen wird.

class Papa extends React.Component { 
    constructor(p, c) { super(p, c) } 
    handleFilterChange(valueFromChild) { 
    // 
    } 
    render() { 
    return <Child filterHandler={this.handleFilterChange} /> 
    } 
} 

const Child = ({filterHanlder}) => (
    <button onClick={() => filterHandler('valueToParent') } >Click Me</button> 
)