Блог

Главная - Вопросы по программированию - Реагировать: Очистить поля при отправке

Реагировать: Очистить поля при отправке

#reactjs

Вопрос:

У меня есть следующее:

 {inputFields.map((inputField, index) =gt; ( lt;Fragment key={`${inputField}~${index}`}gt; lt;Select isClearable classNamePrefix="select" ref={myRef} menuPortalTarget={document.body} styles={style} placeholder="Select Foods" name="Foods" value={inputField.foods} options={options} onChange={event =gt; handleInputChange2(index, event)} className="select selectNarrow" /gt;amp;nbsp;amp;nbsp; lt;TextField InputLabelProps={{shrink: true,}} id="standard-basic" label="Quantity" value={inputField.Quantity} name="Quantity" onChange={event =gt; handleInputChange(index, event)} type="number" variant="outlined" InputProps={{ inputProps: { min: 0, max: 100 } }} /gt; lt;/Fragmentgt; ))}

Что я пытаюсь сделать, так это после отправки очистить оба этих поля.

  const [inputFields, setInputFields] = useState([  { Food: '', Quantity: '' } ]);  const handleInputChange2 = (index, event) =gt; {  if (!event) {  event = {  label: '',  value: '',  };  }  const values = [...inputFields];  values[index] = event;  setInputFields(values); };

Если я попытаюсь добавить поля setInput (null) Я получаю ошибку при отправке: InputFields.map не является функцией

Есть идеи о том, как я могу очистить эти поля после отправки?

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

1. Пожалуйста, покажите, что у вас есть в полях ввода по умолчанию

2. По умолчанию это массив — [ { «Еда»: «», «Количество»: «» } ]

3. Как выглядит функция отправки?

4. const onSubmit = e =gt; { e.preventDefault(); firebase . firestore() .коллекция(«блюда») .добавьте({ Имя : имя, Блюда : блюда, Метод : метод приема пищи, Продукты питания : поля ввода }) .затем(() =gt; Имя набора(«»), набор услуг(«»), страна набора(null), setLang(null), Метод набора(«»), набор продуктов(null)) };

5. @PaulVI просто верните состояние ваших полей по умолчанию после отправки: setInputFields(YOUR_INITIAL_STATE)

Ответ №1:

 const INITIAL_STATE = [ { "Food": "", "Quantity": "" } ]; const [inputFields, setInputFields] = useState(INITIAL_STATE);

После отправки:

 setInputFields(INITIAL_STATE);

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

1. Это все еще остается — имеет ли значение тот факт, что он находится в массиве? Нужно ли мне вообще ссылаться на индекс?

2. @PaulVI Массив не должен быть проблемой. Лучше ссылаться на поле name , например: [e.target.name]: e.target.value

3. Извините, на самом деле это действительно так, но метка опции все еще остается — как ее очистить, чтобы заполнитель вернулся?

4. как и выше, опция «Выбрать» все еще видна?

5. @PaulVI можете ли вы воспроизвести вашу проблему с codesandbox и т. Д.?

Ответ №2:

В вашей функции, которая обрабатывает отправку, выполните это:

 const handleSubmission = async (e) =gt; {  e.preventDefault();  // Say you're submitting to a server using axios,  try{  await axios.post(URL, {...data to submit}, {  headers: {}  });  // On successful submission, clear all fields  setInputFields({  Food: '',  Quantity: '',  });  catch(error){  ...handle errors  }

Я бы посоветовал вам написать свое сообщение так:

 onSubmit={e =gt; handleSubmission(e)}

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

1. Я не использую axios и уже делаю это

2. Не имеет значения, используете ли вы axios. Вероятно, вы отправляете данные на серверную часть; поэтому используйте fetch или любой другой удобный для вас модуль…

Метки: