react 父组件获取子组件的数据
时间: 2023-06-21 07:07:16 浏览: 103
要让一个父组件得到子组件的数据,需要通过props属性将子组件中的数据传递给父组件。
首先在子组件中创建一个函数,将需要传递的数据作为参数传入该函数。然后在父组件中定义一个函数,该函数会接收子组件传递的数据作为参数。在父组件中使用子组件时,将该函数以props的形式传递给子组件,然后在子组件中调用该函数并将需要传递的数据作为参数传递给该函数即可。
下面是一个示例代码:
```javascript
// 子组件
class ChildComponent extends React.Component {
handleClick = () => {
const data = '这是需要传递的数据';
this.props.getData(data);
}
render() {
return (
<button onClick={this.handleClick}>点击我</button>
);
}
}
// 父组件
class ParentComponent extends React.Component {
getDataFromChild = (data) => {
console.log('从子组件中获取到的数据:', data);
}
render() {
return (
<ChildComponent getData={this.getDataFromChild} />
);
}
}
```
在这个示例中,子组件是一个按钮,点击该按钮会调用`handleClick`函数。在`handleClick`函数中,我们将需要传递的数据作为参数传递给父组件传递过来的`getData`函数。
在父组件中,我们定义了一个名为`getDataFromChild`的函数,该函数接收从子组件传递过来的数据作为参数,并将该数据打印到控制台中。在父组件的`render`函数中,我们将`getDataFromChild`函数以props的形式传递给子组件`ChildComponent`。
这样,当我们在子组件中点击按钮时,就会触发父组件中的`getDataFromChild`函数,并将子组件中传递的数据作为参数传递给该函数,从而实现了父组件获取子组件数据的目的。
阅读全文