过滤和更改列表反应

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

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事件并将选定的项目保留在选定的项目中，但不确定该怎么做。有人有想法吗？提前感谢<</p>

div class="one_answers">

如果您从 props 中获取 selectedItems，则意味着该值已从父组件中赋予了您的组件，该组件可能具有保留它的状态。

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

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

您需要更详细的解释还是可以的简报？

你混淆了state，props它的外观。我假设您想将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>
    )
  }
}

相关内容

最新更新

热门标签：