React：使用子复选框更新父组件的状态

Question

我有以下父组件：

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

render() {
  return (
    <Child />
  )
}

还有以下子组件：

export class Parent extends Component {
  constructor(props) {
    super(props)
    state = {
      num: 0
    }  
  }
}

toggleCheckboxChange = () => {
   this.setState({ num: 5})
}

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

我想使用复选框将子状态 num 设置为 5，然后将其传递给父状态 value。

最好的方法是什么？

Answer 1

正如我在评论中所说，将状态移至父级是最简单的。

working example

import React, {Component} from 'react';
import {render} from 'react-dom';

class Parent extends Component {

    state = {
        value: 0
    }

    toggleCheckboxChange = ev => {
        this.setState({value: 5})
    }


    render() {
        return (
            <Child num={this.state.value} toggleCheckboxChange={this.toggleCheckboxChange}/>
        );
    }
}

function Child({num, toggleCheckboxChange}) {
    return (
        <div>
            <label>
                {num}
                <input type="checkbox" onChange={toggleCheckboxChange}
                />
            </label>
        </div>
    )
}

render(<Parent/>, document.getElementById('root'));