Фильтрация и изменение списка React

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

Вы смешиваете state и props, судя по всему. Я предполагаю, что вы хотите сохранить список selectedItems в состоянии?

Если это так, вам нужно будет добавить / удалить itemId из списка selectedItems. Есть несколько способов сделать это. Одним из таких методов является использование функции 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>
    )
  }
}

Answer 2

Если вы берете selectedItems из реквизита, это означает, что значение было передано вашему компоненту из родительского, который может иметь состояние, в котором он его хранит.

Это означает, что у вас должен быть своего рода обработчик 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 })
}

Вам нужно более подробное объяснение, или это задание в порядке?