onChange react-select 没有调用我的函数

Question

我有以下 react-select 代码，它们都可以正常工作并设置我的 Formik 状态值。

  const [selectedOptions, setSelectedOptions] = useState([]);  

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={(selectedOptions) => {
            let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOptions } };
            handleChange(e);
            handleChangeIndex(index);
        }}
    />

我的问题是，在onChange期间我还想调用另一个函数：handleChangeIndex来设置状态值，即：

  const handleChangeIndex = index => selectedOption => {
    console.log("inside handleChangeIndex....")
    const optionsCopy = [...selectedOptions];
    optionsCopy[index] = selectedOption;

    setSelectedOptions(optionsCopy);
  };

在上面的 <Select> 中，我的函数 handleChangeIndex(index) 没有被调用，因为我没有看到 console.log 消息，但是如果我按如下方式调用 <Select>只有我的 handleChangeIndex 才有效。

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={handleChangeIndex(index)}
    />

人们可以协助如何调用我的功能，如顶部<Select>

Answer 1

当您将 handleChangeIndex 直接传递给 Select 时，您正在调用该函数，该函数返回另一个函数 (currying)。然后 Select 在值更改时调用新的内部函数。

当您在第一个示例中的 onChange 中直接调用 handleChangeIndex 时，您只调用了一次，这意味着您正在获取该内部函数，然后不对其进行任何操作.

如果您随后使用 selectedOptions 调用该内部函数，那么它应该可以正常工作。

  const [selectedOptions, setSelectedOptions] = useState([]);  

    <Select
        options={myOptions}
        isMulti={true}
        name={`myGroups.${index}.selectedOptions`}
        onChange={(selectedOptions) => {
            let e = { target: { name: `myGroups.${index}.selectedOptions`, value: selectedOptions } };
            handleChange(e);
            handleChangeIndex(index)(selectedOptions);
        }}
    />

onChange react-select 没有调用我的函数

onChange react-select not calling my function

javascript

reactjs

react-select

formik