Question

我有两个列表由父级传递给子级组件。看起来像这样：

render() {
  const {selectedItems, items} = this.props;
  return (
    <div>
      {items.map(item => (
        <Checkbox
          key={item.id}
          name={item.name}
          checked={this.state.selectedItems.indexOf(item.id) > -1}
          onChange={e => this.handleChange(e)}>
          {item.name}
        </Checkbox>
      ))}
    </div>
  )
}

我试图处理onChange事件并将选定的项目保留在selectedItems列表中，但不确定如何执行。有人知道吗？预先感谢

Answer 1

如果您要从道具中获取selectedItems，则意味着该值是从父级组件中提供给您的组件的，而父组件可能处于保留状态。

这意味着您必须通过这样调用的props传递一种onChange处理程序：

...
const {selectedItems, items, onChange} = this.props;
...
return (
  ...
  onChange={ onChange }>
  ...

然后，在父组件中，将以以下方式呈现组件：

render() {
  return (
    <Checklist
      selectedItems={ this.state.selectedItems }
      items={ this.state.items }
      onChange={ this.handleChange }
    />
  )
}

此外，在父组件中，您将拥有handleChange本身，它将使用所选项目更新状态：

handleChange e => {
  const newSelectedItems = // your logic to update the selectedItems list
  // this.setState({ selectedItems: newSelectedItems })
}

您需要更详细的说明吗？还是可以的？

Answer 2

您将state和props的外观混为一谈。我假设您想将selectedItems列表保持在该状态？

如果是，则需要从selectedItems列表中添加/删除itemId。您可以通过多种方式执行此操作。这些方法之一是使用Array#splice函数。

class Checkboxes extends Component {
  state = {
    selectedItems: [],
  };

  handleChange = itemId => {
    const selectedItems = this.state.selectedItems.slice();

    if (selectedItems.indexOf(itemId) > -1) {
      selectedItems.splice(selectedItems.indexOf(itemId), 1);
    } else {
      selectedItems.push(itemId);
    }

    this.setState({ selectedItems });
  };

  render() {
    const { items } = this.props;
    const { selectedItems } = this.state;

    return (
      <div>
        {items.map(item => (
          <Checkbox
            key={item.id}
            name={item.name}
            checked={selectedItems.indexOf(item.id) > -1}
            onChange={() => this.handleChange(item.id)}>
            {item.name}
          </Checkbox>
        ))}
      </div>
    )
  }
}

过滤和更改列表React

2 个答案: