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

您应该在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>
    )
  }
}

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

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

1 个答案: