陣營子組件的狀態不定

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