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

Question

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

• 包装纸
• 清单
• 项目清单

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

 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

您应该改为在Wrapper组件中维护列表的状态（并因此保留复选框），并将其传递给List组件。

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

因此，您的代码将如下所示：

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

我没有测试此代码，但希望您能理解。 维护和更改顶部组件的状态，并仅使用下部组件进行显示和交互。