Вернуть выпадающий список к параметру по умолчанию после отправки

#javascript #reactjs

Вопрос:

У меня есть выпадающий список с несколькими полями, которые используются для обновления записи в БД. Однако у меня возникает проблема, когда я нажимаю отправить, чтобы выпадающий список вернулся к исходному состоянию по умолчанию.

Вот выпадающий список

 
<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, так это настройка выбранного идентификатора продукта в качестве текущего выбранного продукта, чтобы я мог сопоставлять данные и устанавливать заполнители в качестве предварительно заполненных данных в полях ниже (здесь не показано).

Я получаю данные через GraphQL useQuery, возможно, я не контролирую это поле так, как должен, поэтому я не могу управлять им после события, подобного onSubmit. Все предложения приветствуются, спасибо.

1. Когда вы отправляете форму на свой сервер, она перезагружается?

2. Да, вы должны это контролировать. value={this.state.product} или что-то в этом роде. Затем просто сбросьте значение состояния на null .

3. @Chris нет, он не перезагружается, я использую мутацию для обновления, возможно, это позволило бы мне вызвать функцию очистки значений внутри опции OnCompleted в мутации, но я поместил ее в onClick в кнопке отправки

4. @ChrisG как ни странно, это не сработало, я присвоил начальному состоянию значение null и передал его первому варианту вне карты, я считаю, что проблема заключается в том, что значение контролируется на карте идентификатором цикла, в то время как снаружи я использую состояние. Но useRef работал так хорошо, спасибо за ввод.

5. По-видимому, вы не должны использовать null , но "" работает нормально: codesandbox.io/s/lucid-allen-on5s2?file=/src/App.js

Ответ №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>
  );
}