阵营子组件的状态不定

Question

我有一个父组件，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> 
    ) 
    } 
} 

和子组件，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} /> 
    ); 
    } 
} 

当改变在FormControl的文本，该onChange属性按预期发射，但在父母对象中，子女的state为undefined。我预计它会填充正确的状态。

Answer 1

React数据在一个方向上流动，如果你的父母应该知道孩子的变化，你必须将一个处理器作为一个道具传递给孩子，所以它会从孩子内部调用。

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