Question

我正在为此表格创建一个新的通用下拉菜单组件。我遇到了一个问题，当您进行新选择时，它将再次将新值设置为当前值。当我第二次选择所需选项时，下拉菜单将显示正确的选项。

经检查，我注意到当我使用event.target.value时，它仅返回我设置的当前（默认）值，而不是我尝试选择的值。我怀疑这是问题所在。

function SelectInput  (props) {
    const [selectedOption, setSelectedOption] = useState(undefined);

    useEffect(() => {
      setSelectedOption(input.currentValue);
    }, [props.currentValue])

    return (
        <select
          name={props.inputName}
          value={selectedOption}
          ref={props.register}
          onChange={e => setSelectedOption(e.target.value)}>
          {props.options.map((option, i) => (
            <option value={i+1} key={i}>{option}</option>
          ))}
        </select>
    )
  };

如果使用e.target.value不是获取用户尝试选择的选项的正确方法，则不确定是什么。该字段必须能够显示预填充的数据（或选项），但还允许用户更改值。（希望它不会像当前那样单击两次）

Answer 1

您的设置对我来说有点奇怪，所以我用标准的React道具代替了您的输入参数。您不需要useEffect钩子，如果将其取出，它会起作用：

useState

您尝试设置的“ currentValue”可能与选项值（例如数字）不相关。

https://codesandbox.io/s/react-select-input-fn4to

当用户在下拉组件中选择新选项时，无法传递正确的值

1 个答案: