親コンポーネントがReactの子コンポーネントの状態を管理する方法

Question

私はReactで構築された3つのコンポーネントを持っています。彼らは以下のとおりです。クリックされたチェックボックスの状態を管理する方法

• ラッパー
• 一覧
• のListItem

。私は、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

あなたは代わりにラッパーコンポーネントにリストの状態（したがって、チェックボックス）を維持し、あなたの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> 
    ) 
    } 
} 

私はこのコードをテストいませんでしたが、私はあなたがそれの要点を得る願っています。上位コンポーネントの状態を維持および変更し、下位コンポーネントのみを使用して表示および操作します。