如何使用父组件

Question

1. 我想在第二个孩子中调用一个函数，如

const CallListRow = (props) => {
    return (
        <TableRow key={props.id}>
            <TableRowColumn>{props.id}</TableRowColumn>
            <TableRowColumn>{props.date}</TableRowColumn>
            <TableRowColumn>{props.callerId}</TableRowColumn>
            <TableRowColumn><Link label="Click to Call" to="javascript:void(0)" onClick={()=>dialPhone(props.phone)}  >{props.phone}</Link></TableRowColumn>
            <TableRowColumn>{props.duration}</TableRowColumn>
        </TableRow>
    );
}

1. 在onClick props.phone值之后想要进入First Child组件

2. 两个子组件都在父组件中导入。

3. 然后如何在First Child组件中点击值???

Answer 1

您需要调用父函数来更新父级中的状态，然后将其作为道具传递给第一个孩子

父

..
changeSelected = (val) => {
     this.setState({selected: val})
}

render() {
  return (
     <div>
     <Firstchild selected={this.state.selected}/>
     <Secondchild changeSelected = {(val)=> {this.changeSelected(val)}}/>
     </div>
  )
}

则firstChild：

render() {
    console.log(this.props.selected);
}

SecondChild：

handleClick = (val) => {
    this.props.changeSelected(val);
}