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

Question

我有3个由React构建的组件。他们是：

• 包装器
• 列表
• ListItem

如何管理单击复选框的状态。我希望包装器知道检查了哪些复选框。

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>
    )
  }
}

我没有测试此代码，但我希望您能获得观点。在顶部组件中维护和更改状态，并使用较低的组件仅显示和交互。