如何在 react-select 中使用 onChange？

Question

我正在尝试在我的react-select中创建onChange函数。以下是我的代码：

  const find = (event) => {
    event.preventDefault();
    if (event.target.value === "Users") {
      setSearchUsers(true);
      setSearchTeams(false);
    } else if (event.target.value === "Teams") {
      setSearchUsers(false);
      setSearchTeams(true);
    }
  };

  <Select
    className="search-select"
    instanceId="long-value-select"
    closeMenuOnSelect={false}
    components={animatedComponents}
    defaultValue="Select"
    isMulti
    onChange={(e) => find(e.target.value)}
    options={searchData}
  />

当我尝试更改选项时，出现以下错误：

TypeError: event.preventDefault不是一个函数

在这种情况下，如何使用onChange函数？

- Nhan Nguyen

Answer 1

您正在将event.target.value传递到find方法中，然后再使用该事件值获取 event.target.value。您不需要再次执行此操作，因为您已经传递了该值。 prevenDefault()方法不存在于事件的值上，而是存在于事件对象本身上。只需将事件对象作为参数传递以使用preventDefault()。

 onChange={(e) => find(e)}

- Abdullah Ch

---

onChange={find}会自动将事件传递给函数。 - kta

Answer 2

只需像这样更新onChange：

onChange={(e) => find(e)}

或者更短：

onChange={find}

- Viet

---

仍然出现错误 TypeError: event.preventDefault 不是一个函数。 - Nhan Nguyen

你使用 preventDefault 是为了什么？是为了阻止表单提交吗？ - Andy

onChange in react-select return a value not an event so you cannot use event.preventDefault - Viet

我明白了，感谢您指出我的错误。那么我该如何更改我的onChange函数以使其与react-select一起使用呢？当我选择一个选项并且console.log(value)时，它会给我这个结果：0: label: "Users", value: "Users"。 - Nhan Nguyen

Answer 3

此处理程序仅将事件的值传递给find，而不是事件本身，该值没有preventDefault方法。

onChange={(e) => find(e.target.value)}

将事件通过处理程序直接传递给函数...

onChange={find}

"...然后让函数提取该值"。

function find(event) {
  event.preventDefault();
  const { value } = e.target;
  if (value === 'Users') {
    // ...
  }
}

- Andy

Answer 4

onChange={(e) => find(e.target.value)}

您将所选值传递给了find函数，它是一个值而不是事件，因此您会收到错误。

将其更改为onChange={find}将可以平稳地工作，因为默认操作是可取消的。

- sid