时间戳

首页 > 解决方案 > 当用户在下拉组件中选择新选项时无法传递正确的值

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

问题描述

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

经过检查，我注意到当我使用 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 不是获取用户尝试选择的选项的正确方法，我不确定是什么。该字段需要能够显示预先填充的数据（或选项），但还需要允许用户更改值。（希望不是两次点击，就像它目前的行为一样）

标签： reactjs

解决方案

你的设置对我来说有点奇怪，所以我用标准的 React 道具替换了你的输入参数。你不需要 useEffect 钩子，如果你把它拿出来就可以了：

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

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

ReactDOM.render(
  <SelectInput options={input.options} defaultVal={3} />,
  document.getElementById("root")
);

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

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

推荐阅读