|
react父子组件的传值（函数组件和类组件传值）
一. 子传父
1. 函数组件
情景设置：假设子页面有数据要传到父页面，改变它的lable的值
父组件增加方法
const fatherComponent = ({
}) => {
const [label, setLabel] = React.useState(0);
// msg回传的内容
const changeLabel = (msg) =>
// 设置label的值为msg
setLabel(msg);
}
return (
// 父组件 增加changeLabel方法，接收msg，然后改变label的值
// 可以写成 {setLabel(msg);}}>
// 子组件使用父组件上面个定义的方法，把它传进来
changeLabel
}) => {
const [label, setLabel] = React.useState(0);
// 子方法这里传值给父组件
const handleChange = (value) =>
// 调用父类方法，触发 子=>父
changeLabel(value);
}
return (
// 调用父组件的changeLabel方法
// 也可以写成 changeLabel(value)}>
Component } from 'react';
import { render } from 'react-dom';
class GroceryList extends Component {
handleClick(i) {
console.log('You clicked: ' + this.props.items[i]);
}
render() {
return (
{this.props.items.map((item, i) => {
return (
i}>{item}
);
})}
);
}
}
render(
|