子组件向父组件传值代码

在 React 中，子组件向父组件传值的常见方法有以下两种：

1. 通过回调函数方式传递值

在父组件中定义一个函数，然后通过 props 的方式将该函数传递给子组件。子组件在需要向父组件传递值时，调用该函数并将需要传递的值作为参数传递给它。

示例代码：

// 父组件
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
valueFromChild: ''
};
this.handleChildValueChange = this.handleChildValueChange.bind(this);
}

handleChildValueChange(newValue) {
this.setState({ valueFromChild: newValue });
}

render() {
return (
<div>
<Child onValueChange={this.handleChildValueChange} />
<p>Value from child: {this.state.valueFromChild}</p>
</div>
);
}
}

// 子组件
class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
this.props.onValueChange(event.target.value);
}

render() {
return (
<input type="text" onChange={this.handleChange} />
);
}
}

2. 使用 Context

通过在父组件中定义 Context 对象，子组件可以通过该 Context 获取父组件中的数据并且可以修改父组件中的状态。

示例代码：

// 创建一个 Context 对象
const MyContext = React.createContext();

// 父组件
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
valueFromChild: ''
};
this.handleChildValueChange = this.handleChildValueChange.bind(this);
}

handleChildValueChange(newValue) {
this.setState({ valueFromChild: newValue });
}

render() {
// 将 valueFromChild 以及一个回调函数传递给子组件
return (
<MyContext.Provider value={{ valueFromChild: this.state.valueFromChild, onValueChange: this.handleChildValueChange }}>
<Child />
<p>Value from child: {this.state.valueFromChild}</p>
</MyContext.Provider>
);
}
}

// 子组件
class Child extends React.Component {
static contextType = MyContext;

constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
// 通过 context 修改父组件的状态
this.context.onValueChange(event.target.value);
}

render() {
// 从 context 中获取 valueFromChild
return (
<input type="text" value={this.context.valueFromChild} onChange={this.handleChange} />
);
}
}