React中实现子组件向父组件传值并更新父组件count状态的方法

看起来你需要让子组件的数字按钮点击后更新父组件的count状态，这在React里是通过父组件传递回调函数给子组件来实现的——毕竟React是单向数据流，子组件不能直接修改父组件的状态，只能通过父组件提供的方法触发更新。下面是完整的修改方案：

第一步：修改父组件，传递回调与当前状态 #

首先在父组件里定义一个处理状态更新的方法，再把这个方法和当前的count状态作为props传给子组件：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: "" };
    // 绑定this，确保回调里的this指向父组件实例
    this.handleCountChange = this.handleCountChange.bind(this);
  }

  // 接收子组件传递的数字，更新父组件count状态
  handleCountChange(newCount) {
    this.setState({ count: newCount });
  }

  render() {
    return (
      <div>
        <p>当前选中的数字：{this.state.count || "未选中"}</p>
        {/* 把回调函数和当前count传给子组件 */}
        <Child 
          onCountChange={this.handleCountChange} 
          currentCount={this.state.count}
        />
      </div>
    );
  }
}

第二步：修改子组件，调用回调更新父组件状态 #

子组件需要接收父组件传来的onCountChange回调，给每个按钮添加点击事件，点击时把对应数字传给回调。另外原代码的循环有索引问题（i从1开始会漏掉第一个元素），用map遍历数组更简洁安全：

class Child extends Component {
  render() {
    const numbers = ["12", "14", "15", "16", "22", "35", "6", "92", "47", "32", "75", "67"];
    return (
      <div>
        {numbers.map((num, index) => (
          <button
            key={index}
            // 可选：给当前选中的按钮添加样式，方便用户识别
            style={{ 
              margin: "5px",
              padding: "8px 12px",
              backgroundColor: this.props.currentCount === num ? "#4CAF50" : "#fff",
              color: this.props.currentCount === num ? "#fff" : "#000"
            }}
            // 点击时调用父组件的回调，传递当前数字
            onClick={() => this.props.onCountChange(num)}
          >
            {num}
          </button>
        ))}
      </div>
    );
  }
}

关键逻辑说明 #

1. 单向数据流与回调传递：React中父组件通过props传递数据和方法，子组件不能直接修改父组件state，只能调用父组件提供的onCountChange回调，把需要更新的值传回去，由父组件自己执行setState。
2. this绑定：在父组件构造器里绑定handleCountChange的this，确保回调执行时能正确调用父组件的setState方法。
3. 循环优化：用map遍历数组更符合React的写法，同时要给每个列表项添加唯一key（这里用索引，实际项目中如果有唯一id优先用id）。
4. 状态同步展示：把父组件的currentCount传给子组件，可以让子组件高亮当前选中的按钮，提升用户体验。

这样修改后，点击子组件的任意数字按钮，父组件的count状态就会同步更新为对应的数字啦！

内容的提问来源于stack exchange，提问作者space_pok