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

Question

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

• 包装
• 列表
• 列表项

如何管理被点击复选框的状态。我想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> 
    ) 
    } 
} 

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