Блог

Главная - Вопросы по программированию - Как сбросить выпадающие значения при отправке формы, другие входные значения очищаются в реактивных крючках

Как сбросить выпадающие значения при отправке формы, другие входные значения очищаются в реактивных крючках

#reactjs #react-hooks

#reactjs #react-hooks

Вопрос:

У меня есть форма, и когда я нажимаю на кнопку отправки, данные отправляются на сервер. Теперь, после того, как данные были отправлены на сервер, мне нужно очистить данные формы до пустого. Все поля очищаются, кроме выпадающего значения.В чем проблема??

 const Form = () => {
        const [data, setdata] = useState({
            "UserName" : "",
            "PhoneNumber" : "",
             "email" : "",
              "dropDown" :"",
        })
    
        const [update, setUpdate] = useState([])
    
        const handleChange =(e)=>{
         setdata({...data,[e.target.name]:e.target.value});
            
        }
    
       const handleSubmit=(e)=>{
        e.preventDefault();
        // setUpdate({...data,update});
        // console.log(data);
          axios.post('url',data).then((res)=>{
            //   console.log("user added successfully");
            handleClear();      
          })
    
       }

Итак, здесь я написал функцию для очистки формы и вызвал эту функцию после отправки формы

  const handleClear=()=>{
        let clear={
            "UserName" : "",
            "PhoneNumber" : "",
             "email" : "",
              "dropDown" :"",
        }
        setdata(clear);
    }
    
        return (
            <React.Fragment>
                <h1>LordShiva</h1>
                <div className="container mt-3">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="card">
                                <div className="card-header bg-success text-white">
                                    <h4>Form</h4>
                                    <form>
                                        <div className="form-group">
                                            <input type="text" className="form-control" placeholder='UserName' name="UserName" value={data.UserName} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" value={data.PhoneNumber} onChange={handleChange} />
                                        </div>
                                        {/* <div className="form-group">
                                                       <DatePicker selected={startDate} placeholder='Select Date' />
                                                       </div> */}
                                        <div className="form-group">
                                            <input name="email" className="form-control" placeholder='Email' value={data.email} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <select name="dropDown" onChange={handleChange} className="form-control" >
                                                <option value=""></option>
                                                <option value="Reactjs">ReactJS</option>
                                                <option value="JS">JavaScript</option>
                                                <option value="csCSSs">CSS</option>
                                                <option value="HTML">HTML</option>
                                            </select>
                                        </div>
                       

                                            <div className="form-row">
                                            <button className="btn btn-cyan" type="button" onClick={handleSubmit}>Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </React.Fragment >
        )
    }

Ответ №1:

Передайте значение dropdown состояния в value реквизит select элемента.

 <select
  name="dropDown"
  value={data.dropdown} // <-- set value to make a controlled input
  onChange={handleChange}
  className="form-control"
>
  <option value=""></option>
  <option value="Reactjs">ReactJS</option>
  <option value="JS">JavaScript</option>
  <option value="csCSSs">CSS</option>
  <option value="HTML">HTML</option>
</select>

Комментарии:

1. Да, это работает, большое спасибо, но у меня также есть радио и флажки, но я не передал значение prop для радио и флажков, и оно очищается, но только выпадающий список не был очищен.. Есть ли какая-то конкретная причина для этого?

2. @Sundeep У меня в голове ничего нет, но я бы не подумал, что они будут вести себя иначе, чем другие входные данные. У вас есть воспроизводимый пример?

3. Нет воспроизводимого примера, я просто новичок в ReactJS, сейчас я учусь и просто делаю несколько примеров. Большое спасибо за вашу помощь, есть ли какие-нибудь хорошие видео или какой-либо курс для изучения React Hooks?

4. @Sundeep IMO документы react довольно хороши. Если вы переходите к react hooks, я бы посоветовал убедиться, что вас действительно устраивает жизненный цикл компонента react и обновления состояния. Это поможет вам понять, когда выполняются обратные вызовы hook и как их запускают зависимости. Я бы поискал статьи, написанные Дэном Абромовым, если вам нужны дополнительные ресурсы.

5. Хорошо, спасибо, я буду искать по этому