如何在不使用 onChange 的情况下使用 React 设置 <select> 的值？

Question

我得到了以下 HTML select 元素

<select id="bars" onChange={(e) => onBarChange(e)}>
  {props.results.map((bar, y) => (
    <option value={bar.id} key={bar.id} data-key={bar.id}>
      {bar.name} in {bar.city}
    </option>
  ))}
</select>;

使用以下 onChange 方法作为回调：

const onBarChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
  setBarId(parseInt(e.target.value));
};

但是，只要 props.results 中只有一个栏（props.results.length === 1），那么 onBarChange(e) 将永远不会被调用并且因此 barId 将始终保持为 0（我猜是默认值 select）。

我尝试将该逻辑放入提交表单中，如下所示：

if(props.results.length === 1) {
  setBarId(props.results[0].id)
}

但这也不起作用。如果我控制台日志 props.results[0].id 我得到正确的 ID 但如果我控制台日志 barId 在此之后它仍然是 0。怎么会这样？是否触发了重新渲染并且 select 立即再次将默认状态设置为 0？

我该如何解决这个问题，以便当 props.results 中只有一个栏时，包裹此 select 的提交按钮将正确的 barId 发送到后端（当然也应该与多个栏一起使用。 .)?

Answer 1

当您使用 useState 创建 barId 时传递默认值。

const [barId, setBarId] = useState(props?.results[0]?.id ?? 0)


const onBarChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setBarId(parseInt(e.target.value));
};


<select id="bars" onChange={(e) => onBarChange(e)}>
    {props.results.map((bar, y) => (
        <option value={bar.id} key={bar.id} data-key={bar.id}>
            {bar.name} in {bar.city}
        </option>
    ))}
</select>;

您可以做的另一件事是先添加一个空值。

<select id="bars" onChange={(e) => onBarChange(e)}>
    <option>Select Bar</option>
    {props.results.map((bar, y) => (
        <option value={bar.id} key={bar.id} data-key={bar.id}>
            {bar.name} in {bar.city}
        </option>
    ))}
</select>;

如何在不使用 onChange 的情况下使用 React 设置 <select> 的值？

How do I set a value for a <select> with React without using onChange?

javascript

html-select

reactjs