Question

我正在尝试创建一个独立的组件MultiSelect（我知道那里有组件，但我想学习如何做一个组件。）

我创建它的方式是将选定的值存储在其状态中。

我从我的容器中这样称呼它：

<MultiSelect
  items={ this.props.boards }
  label="Boards"
  value={ this.props.selectedBoards }
  onChange={ e => this.onChange(e) } />

当我发出一个动作时，我得到了容器道具的正确值。我的MultiSelect甚至显示正确的选项。但由于某种原因，它不会更新选定的值。在容器this.props.selectedBoards中具有正确的值，但该组件未获得此更新。

export default class MultiSelect extends React.Component {
  constructor(props) {
    super(props); // props.items = all options to select

    this.state = {
      selectedItems: props.value || [], // selected options (problem)
      search: '',
      hidden: true,
    };
  }

  render() {
    return (<div>
      ...
      this.state.selectedItems

选择的选项位于props（有效），所选选项位于state（未更新）。

如何使用状态为MultiSelect的新值更新selectedItems组件？或者，建议这样的组件的推荐方法是什么？

Answer 1

我最终将selectedItems从state移动到props，然后移动到onChange事件，其中元素被选中我从{获取值{ {1}}，添加/删除已更改的项目并使用修改后的数组调用props。

然后在容器上我用新数组调度一个动作，这样我就可以得到一个新的状态。

我通过委派任务来跟踪所选项目到容器来解决它。

多选：

this.props.onChange

容器：

export default class MultiSelect extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      search: '',
      hidden: true,
    };
  }

  onChange(item) {
    const selectedItems = [ ...this.props.selectedItems ];

    const index = selectedItems.findIndex(element => element.value === item.value);

    if (index !== -1) {
      selectedItems.splice(index, 1);
    }
    else {
      selectedItems.push(item);
    }

    this.props.onChange(selectedItems); // container
  }

  render() {
    return (<div>
      ...
      this.props.selectedItems

React Redux上没有更新本地状态的组件

1 个答案: