React技术实现：通过子组件复选框更新父组件状态

这是React父子组件通信里最基础的场景之一，咱们通过父组件传递回调函数给子组件的方式就能轻松实现，具体修改步骤如下：

1. 调整父组件代码 #

父组件需要先定义一个更新自身状态的方法，再把这个方法作为props传递给子组件：

import React, { Component } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      value: 0 
    };
  }

  // 定义更新父组件状态的方法，接收子组件传来的值
  updateParentValue = (newValue) => {
    this.setState({ value: newValue });
  }

  render() {
    return (
      // 将回调方法作为props传给子组件
      <Child onUpdateValue={this.updateParentValue} />
    );
  }
}

2. 修改子组件代码 #

子组件在触发复选框变更事件时，调用父组件传过来的回调函数，把需要更新的值传递过去：

import React, { Component } from 'react';

export class Child extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      num: 0 
    };
  }

  toggleCheckboxChange = () => {
    const newNum = 5;
    this.setState({ num: newNum });
    // 调用父组件传来的回调函数，传递更新后的值
    this.props.onUpdateValue(newNum);
  }

  render() {
    return (
      <div>
        <label>
          {this.state.num}
          <input type="checkbox" onChange={this.toggleCheckboxChange} />
        </label>
      </div>
    );
  }
}

补充：根据复选框状态动态传值 #

如果需要根据复选框的选中/未选中状态传递不同的值，可以调整子组件的事件处理函数：

toggleCheckboxChange = (e) => {
  // 根据复选框是否选中，设置不同的数值
  const newNum = e.target.checked ? 5 : 0;
  this.setState({ num: newNum });
  this.props.onUpdateValue(newNum);
}

这样每次切换复选框时，子组件不仅会更新自己的num状态，还会同步把值传递给父组件，更新父组件的value状态~

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