反應：使用子復選框來更新父組件的狀態

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

就像我在評論中說的那樣，最簡單的方法是將狀態移到父級。

工作實例

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'));