如何让父组件管理React中子组件的状态？

Question

我用React构建了3个组件。他们是：

• 包装器
• 列表
• 列表项

如何管理单击的复选框的状态。我想Wrapper知道哪些复选框被选中。

class ListItem extends React.Component {
  render(){
    return (
      <li>
        <input type="checkbox" onChange={e => handleSelect(e.target.checked)} />
        <label>Checkbox 1</label>
      </li>
    )
  }
}

class List extends React.Component {
  getList(){
    const itemsList = this.props.list.map(
      (item, index) => (
        <ListItem key={index} item={item} />
      )
    )
   return itemsList;
  }
  
  render(){
    <ul>
      {this.itemsList}
    </ul>
  }
}

class Wrapper extends React.Component {
  const list = [
    {"id": 1, "label": "label 1"},
    {"id": 2, "label": "label 2"},
  ]

  render(){
    <List list={list} />
  }
}

Answer 1

您应该在包装组件中维护列表（以及复选框）的状态，并将其传递给列表组件。

另外，在包装器组件中创建处理程序，并将其向下传递。

所以你的代码变成这样：

class Wrapper extends React.Component {
    constructor() {
        this.state = [
            {"id": 1, "label": "label 1", checked: false},
            {"id": 2, "label": "label 2", checked: false}
        ]
    }

    handleChange(id, checked) {
        this.setState((state) => {
            return state.map(item => {
                return {
                   ...item,
                   checked: item.id === id ? checked : item.checked
                }
            });
       });
    }

    render() {
        <List list={this.state} onChange={this.handleChange} />
    }
}


class List extends React.Component {
  render(){
    <ul>
    { this.props.list.map((item, index) => (
          <ListItem key={index} item={item} handleChange={this.props.handleChange} />
    )}
    </ul>
  }
}

class ListItem extends React.Component {
  render(){
    const { item } = this.props;
    return (
      <li>
        <input type="checkbox" onChange={(e) => this.props.handleChange(item.id, e.target.checked)} />
        <label>{ item.label } </label>
      </li>
    )
  }
}

我没有测试这段代码，但我希望你能明白它的要点。在顶部组件中维护和更改状态，并使用较低的组件来显示和交互。