javascript - 提交后将下拉列表恢复为默认选项

Question

我有一个包含几个字段的下拉列表，用于更新数据库中的条目。但是，当我单击提交以使下拉列表返回到初始默认状态时，我遇到了问题。

这是下拉菜单

<select className="select--field" name="products" onChange={(e) => {handleChange(e)}}>
    <option value={null}>Please select a product</option>
    {data.products.map(({id, productName}) => (
         <option key={id} value={id}>{productName}</option>
     ))}
</select> 

handleChange 的作用是将所选产品 ID 设置为当前所选产品，以便我可以映射数据并将占位符设置为下面字段中的预填充数据(此处未显示)。

我通过 GraphQL useQuery 获取数据，可能是我没有像我应该的那样控制这个字段，所以在像 onSubmit 这样的事件之后我无法真正控制它。欢迎所有建议，谢谢。

Answer 1

您可以使用useRef 。它是控制表单元素的有效工具。

这是一个示例( https://codesandbox.io/s/billowing-haze-zmq4t?file=/src/App.js ):

const products = [
  {id: 112, productName: "Prod 1"},
  {id: 113, productName: "Prod 2"},
]

export default function App() {
  const dropdown = useRef();

const handleChange = () => {
  console.log('do stuff...')
  setTimeout(() => {dropdown.current.value = ""}, 2000) // <- simulating some process...
  
}

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <select ref={dropdown} className="select--field" name="products" onChange={(e) => {handleChange(e)}}>
        <option value={""}>Please select a product</option>
        {products.map(({id, productName}) => (
            <option key={id} value={id}>{productName}</option>
        ))}
    </select> 
    </div>
  );
}