使用 React Select 取回“已清除”输入元素的值

Question

我有几个 ReactSelect 组件和一个全局状态，负责将我所有的 selected 值保存在一个数组中。

Select

      <Select
        styles={inputStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={true}
        isSearchable={false}
        placeholder={'Select Your Most Convenient Time Slot'}
        options={newHoursArr}
        isMulti={false}
        onChange={(values) => handleChange(values)}

        defaultValue={clientServiceReferral.selectedTimeSlots.map((referral) => (
          referral.timeSlot === timeWithDate ? (
            { ['label']: referral.value, ['value']: referral.value }
          ) : null
        ))}
      />

handleChange 函数

  const handleChange = (value) => {

    const found = clientServiceReferral.selectedTimeSlots.find(element => element.timeSlot === timeWithDate);

    if (found) {
      clientServiceReferral.selectedTimeSlots.splice(found, 1)
    }

    const newValue = {
      timeSlot: timeWithDate,
      value: value.value
    }

    setClientServiceReferral({
      ...clientServiceReferral,
      selectedTimeSlots: [...clientServiceReferral.selectedTimeSlots, newValue]
    })
  }

ReactSelect 有一个 isClearable 道具。这允许用户通过单击按钮清除输入。当 values 记录在 onChange 函数中时，此 return 的值为 null，但是有没有办法 return [=33] 中的实际值=] 单击清除按钮时是否正在清除？

Answer 1

有一个可选的第二个参数传递给 onChange 事件。属于这种类型：

export interface ActionMetaBase<Option> {
  option?: Option | undefined;
  removedValue?: Option;
  removedValues?: Options<Option>;
  name?: string;
}

现在，我从未使用过这个库，但看起来 removedValue 或 removedValues 可能有用吗？ idk.

无论如何，我是从 their docs 那里得到的。希望它对你有用：

Answer 2

对于任何感兴趣的人，通过 Joshua Wood 的回答，可以找到任何已清除项目的价值：

onChange={(values, removedValue) => handleChange(values, removedValue)}

  const handleChange = (value, removedValue) => {

    if (removedValue.action === 'clear') {
      console.log('removed', removedValue.removedValues[0])
    }
// removedValues returns an array

使用 React Select 取回“已清除”输入元素的值

Getting back the value of a `cleared` input element with React Select

javascript

reactjs

react-select