使用 setState (react-select) 将具有可变键的多个对象推送到数组

Question

我的目标是使用来自端点的数据创建 react-select selects，其中查询 var of category（在本例中为 flavors）。所以我想动态创建这些 select 输入，并设置了一个组件来包装主要的 react-select 代码，所以我只需要一个处理函数。

这是我的主文件

const flavours1 = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" }
];
const flavours2 = [
  { value: "banana", label: "Banana" },
  { value: "kiwi", label: "Kiwi" }
];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      test: "test",
      selectedOptions: null
    };
  }

  // Here I want to setState but with the name of each SelectComponent as the key for each object and also push to the existing array rather than over writing it as is currently
  addSelectedOption = (...args) => {
    this.setState({
      selectedOptions: [args[0]]
    });
  };

  componentDidUpdate() {
    console.log(this.state);
  }

  render() {
    return (
      <div style={styles}>
        <SelectComponent
          name="flavours1"
          options={flavours1}
          addSelectedOption={this.addSelectedOption}
        />
        <SelectComponent
          name="flavours2"
          options={flavours2}
          addSelectedOption={this.addSelectedOption}
        />
      </div>
    );
  }
}

和组件：

    import Select from "react-select";

    export default class SelectComponent extends Component {
      constructor(props) {
        super(props);

        this.state = {
          selectedOptions: null
        };
      }

      render() {
        return (
          <form>
            <Select
              isMulti
              onChange={this.props.addSelectedOption}
              value={this && this.state ? this.state.option : null}
              options={this.props.options}
              ref={input => {
                this.selectField = input;
              }}
            />
          </form>
        );
      }
    }

到目前为止，这是我的示例：https://codesandbox.io/s/llzw409n3z

所以我正在努力解决的两件事是：

将对象推送到状态数组，保留所有 selected 值（目前 selecting 在每个不同的 select 上覆盖其他
根据 SelectComponent 的名称属性为每个对象分配一个键

目标是获取结构体

selectedOptions: [
  flavours1: [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" }
  ],
  flavours2: [
    { value: "banana", label: "Banana" },
    { value: "kiwi", label: "Kiwi" }
  ],
];

Answer 1

目前 react-select 组件不提供触发 change 事件的组件名称。因此，您需要通过使 SelectComponent 在内部处理 onChange 事件然后将 this.props.name 传递给 addSelectedOption 处理程序来添加它。

添加

  handleChange = (...args) => {
    this.props.addSelectedOption(this.props.name, ...args)
  }

并应用它

    <Select
      onChange={this.handleChange}
      ...
     />

现在您可以在添加组件上使用

  addSelectedOption = (name, options) => {
    this.setState(({selectedOptions})=>({
      selectedOptions: {
        ...selectedOptions,
        [name]: options
        }
    }))
  };

但是你必须像

一样初始化state

this.state = {
  test: "test",
  selectedOptions: {}
};

以便您在使用 setState 时可以传播 selectedOptions。

使用 setState (react-select) 将具有可变键的多个对象推送到数组

Push multiple objects with variable keys to array using setState (react-select)

ecmascript-6

reactjs

react-select