使用formik時如何修復/清除react-select？

Question

我正在學習 React - 我遇到了一個問題，即運行條件返回時的值似乎仍然在屏幕上可見。

示例：轉到“房間”按鈕，選擇一個房間和一個用戶，然后轉到“用戶”按鈕或“位置”按鈕，這些值仍然顯示為可見/已選擇 - 盡管它們不是。

我看過類似的帖子，但似乎無法讓它工作。 我試過 resetForm() setFieldValue

我已經創建了一個代碼沙盒，其中包含我在下面使用的內容。 也可能有更好的方法來做到這一點......

https://codesandbox.io/s/floral-leftpad-vhfi0

我將不勝感激任何反饋/提示或提示我哪里出錯了！

謝謝，

Answer 1

如果您想重置它，您選擇的值應該為null 。 在您的情況下，它可能是undefined ，因為您找到了值，如果沒有找到 - 此處將是undefined 。

value={
          props.options
            ? props.options.find((option) => option.value === field.value)
            : null || ""
        }

您可以像這樣編碼以使value為null ：

  let value = null;

  if (props.options) {
    value =
      props.options.find((option) => option.value === field.value) || null;
  }

  return (
    <div style={{ width: props.width }}>
      <Select
        {...field}
        {...props}
        name={field.name}
        isSearchable="true"
        isClearable="true"
        value={value}
        onChange={(option) => {
          if (option) {
            setFieldValue(field.name, option.value);
          } else {
            setFieldValue(field.name, 0);
          }
        }}
        onBlur={field.onBlur}
      />
    </div>
  );

檢查一下： https : //codesandbox.io/s/infallible-fire-68m1m?file=/src/CustomSelect.js