React select npm onBlur 函数 returns 一个错误

Question

大家好，我对 react-select onBlur 函数有疑问，我做了很多研究并调查了相关的 git 问题，但仍然找不到答案。 OnBlur 函数没有得到 selected 值，onBlur 中的值显示为未定义。如果有答案请建议我。感谢帮助

Codesanbox Link 供参考：

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  const onSelect = (value) => {
    setValue(value);
  };
  const onBlurValue = (value) => {
    console.log(value);
  };

  return (
    <div>
      <Select
        value={options.label}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

Answer 1

这可能是那个版本的 React 有问题，或者 react-select 和那个特定版本的 react

有冲突

尝试将 react 和 react-dom 升级到最新版本 (17.0.2) 并将 react-select 升级到 4.3.1 解决问题。

工作示例：

Answer 2

您传递给 Select 组件的道具 blurInputOnSelect 在值更改后从组件中移除焦点，并且由于 and setState 是异步的，因此不会立即更新该值.这就是为什么记录到控制台的值是 undefined.

解决方案是从 Select 组件中删除 blurInputOnSelect 属性

Answer 3

考虑这段代码（查看评论）：

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {  
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  // destructuring the object to get 'value' property
  // (the passed object looks like { label, value } )
  const onSelect = ({value}) => {
    // here the 'value' variable is being set
    console.debug("selected value:", value )
    setValue(value);
  };

  // destructuring event object to get 'target' property
  const onBlurValue = ({target}) => {
    console.log("onBlur target value:", target.value);
    // the value is not updated yet, so it holds the previously set value
    console.log("onBlur value:", value || "undefined");
  };

  return (
    <div>
      Current value is: {value || "undefined" }
      <Select
        // the value prop does nothing here
        // value={options.label}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

正如@a.mola所说 - setValue 挂钩是异步的，并且 value 变量在 onBlur 事件触发时尚未更新，因此它成立之前设置的值。

我不确定你想在 onBlur 活动中实现什么，它可能不是合适的地方。

如果您需要以某种方式输出 value - 您可以在 return 部分中执行此操作（如上面的代码中所做的那样）。

如果您需要验证 value 或根据其新选择的值执行某些操作 - 您可以在 onSelect 函数中执行此操作。

Answer 4

您可以添加一个实例变量来存储所选值（可能不是最好的解决方案，但它应该有效）

export default function App() {
  const [value, setValue] = useState();
  const valueRef = useRef();  

  const onSelect = value => {
    valueRef.current = value;
    setValue(value);
  };

  const onBlurValue = () => {
    console.log(valueRef.current);
  };

  return (
    <div>
      <Select
        value={value}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

此解决方案的问题是您将所选值存储在两个位置（状态变量和引用实例变量）。

问题是，为什么需要在 onBlur 处理程序中获取选定值？ onChange 处理程序在您的情况下可能就足够了，不是吗？

React select npm onBlur 函数 returns 一个错误

React select npm onBlur function returns An error

javascript

reactjs

react-select