Сброс параметров в <select>с помощью React

Question

Я пытаюсь узнать, как сбросить параметры после отправки формы. Я не уверен, как выполнить эту задачу. Любой совет очень ценится!

import '../App.css'
import React, { useState } from 'react';
function Interface() {
const [choices, setChoices] = useState({
    selectValue: 'Pick Reason',
    damageValue: 'Pick Reason',
    submitted: false,
    default: 'Pick Option',
})


let handleCart = function(e){
   return setChoices({...choices,selectValue: e.target.value})

}

let handleDamage = function(e){
    return setChoices({...choices,damageValue: e.target.value}) 

}


let buttonSub = function(e){
    e.preventDefault()
    alert(`your teacher is ${choices.selectValue} your damage is ${choices.damageValue}`)
    setChoices({selectValue: '', damageValue: '', submitted: !true})
}


  return (

    <div className="App">
        <h1>Chromebook Deposit Form</h1>
        <form>
            <div className="form-group">
               <label>Select Whose Cart your chromebook belongs too</label>
               <select className="form-control w-50 " id="cart" onChange={handleCart} placeholder='hi'>
                <option>{choices.default}</option>
                <option>Emily Freitag</option>
                <option>Santoro</option>
                <option>Warner</option>
                <option>Baltzell</option>
               </select>
               <hr></hr>
               <label>Select Your Reason For deposit</label>
               <select className="form-control w-50 " id="cart" onChange={handleDamage}>
                 <option>{choices.default}</option>
                <option>Broken Screen</option>
                <option>Broken Keys</option>
                <option>Broken Case</option>
                <option>Other</option>
               </select>





               <button className="button" onClick={buttonSub}>Submit Information</button>

            </div>

        </form>
    </div>
  );
}
export default Interface;

Я попытался установить значения динамически, что работает, но я не могу понять, как заставить его отображать определенное значение после отправки формы.

Answer 1

Вы не полностью контролируете свои входы. Вы предоставляете обработчик изменений, но не значение. Попробуйте просто добавить значение к выборкам:

<select 
  className="form-control w-50 " 
  id="cart" 
  value={choices.selectValue} 
  onChange={handleCart} 
  placeholder='hi'
>

...

<select 
  className="form-control w-50 " 
  id="cart" 
  value={choices.damageValue} 
  onChange={handleDamage}
>

Затем при отправке вы можете просто обновить значение состояния выборок до того, к чему вы хотите их сбросить (похоже, что вы уже есть).

Однако, если реакция не обрабатывает это автоматически, а я просто не знаю, вам нужно будет также установить значение каждого параметра. Строка метки будет достаточно для этого случая:

<select 
  className="form-control w-50 " 
  id="cart" 
  value={choices.damageValue} 
  onChange={handleDamage}
>
  <option value={'default'}>{choices.default}</option>
  <option value={'Broken Screen'}>Broken Screen</option>
  <option value={'Broken Keys'}>Broken Keys</option>
  <option value={'Broken Case'}>Broken Case</option>
  <option value={'Other'}>Other</option>
</select>

Также: этот submitted: !true кажется ненужным. Просто используйте false, если ! не является опечаткой.