我想将子组件的项从子组件设置为父组件

Question

我想扩展子组件中的数字并更改父组件的计数状态。如何将子组件中的数字从父组件更改为父组件的计数状态？

例如，当父组件按下由子组件创建的标记为12的按钮时，我想将父组件的计数状态更新为12。

母组件

class Parent extends Component {
constructor(props) {
super(props);
this.state = {
count: ""
}
}
render() {
return (
<Child />
)
}
}

子组件

class Child extends Component {
render() {
const number = ["12", "14", "15", "16", "22", "35", "6", "92", "47", "32", "75", "67"]
return (
<div>
{(() => {
const items = [];
for (let i = 1; i <= 12; i++) {
items.push(<button>{number[i]}</button>)
};
return <>{items}</>;
})()}
</div>
)
}
}

Answer 1

将函数从父组件传递到子组件，当单击按钮时，子组件将调用该函数，并在该函数中更新父对象的状态例如父组件：

class Parent extends Component {
constructor(props) {
super(props);
this.state = {
count: ""
}
}
render() {
return (
<Child onButtonClick={(number) => this.setState({count: this.state.count + number})}/>
)
}
}

子组件：

class Child extends Component {
render() {
const number = ["12", "14", "15", "16", "22", "35", "6", "92", "47", "32", "75", "67"]
return (
<div>
{(() => {
const items = [];
for (let i = 1; i <= 12; i++) {
items.push(<button onClick={() => this.props.onButtonClick(number[i])}>{number[i]}</button>)
};
return <>{items}</>;
})()}
</div>
)
}
}