Javascript 提交后将下拉列表还原为默认选项

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

这是下拉列表

<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（e）}}>
请选择一个产品
{data.products.map（{id，productName}）=>(
{productName}
))}

handleChange所做的是将选定的产品id设置为当前选定的产品，以便我可以映射数据，并将占位符设置为以下字段中的预填充数据（此处未显示）

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

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

下面是一个例子（）：

const产品=[
{id:112，产品名称：“Prod 1”}，
{id:113，产品名称：“产品2”}，
]
导出默认函数App（）{
const dropdown=useRef（）；
常量handleChange=（）=>{
log（'do stuff…'））
setTimeout（（）=>{dropdown.current.value=”“}，2000）//
请选择一个产品
{products.map（{id，productName}）=>(
{productName}
))}
);
}

当您将表单提交到服务器时，它是否重新加载？是的，您应该控制它。

value={this.state.product}

或类似的东西。然后简单地将状态值重置为

null

@Chris不，它不会重新加载，我正在使用变异来更新，它可能允许我在变异中的onCompleted选项内调用clear values函数，但我已将其放在onClick-in-submit中button@ChrisG奇怪的是，这不起作用，我把将initial state设置为null并将其传递给映射外部的第一个选项，我认为问题在于映射中的值在我使用state时由循环id控制。但是useRef工作得很好，感谢您的输入。显然，您不应该使用

null

，而是

“”

工作正常：使用ref通常是正常的，但这是一种解决方法，不是正确的解决方案。

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>
  );
}