Блог

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

Как очистить ввод формы в ReactJS после успешного добавления продукта

#reactjs

#reactjs

Вопрос:

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

Это мой код для этого

 const onHandleSubmit = (e) => {
    if (values.name.trim() === "") {
      setIsValid(false);
    }
    else {
      createProductRequest(values, imageAsFile);
    }
  };

Это мое значение setdefaultValue

 const [values, setValues] = useState({
    image: "",
    name: "",
    price: 0,
    description: "",
    categoty: "",
  });

Это моя кнопка в форме

 <Button
    btnText="Submit"
    size="btn-md"
    onClick={onHandleSubmit}
    disabled={isValid}
 />

Моя кнопка импортирована из другой папки, поэтому я должен сделать так

Они требуют, чтобы я установил это в useEffect

   useEffect(() => {
    if (type.CREATE_PRODUCT_SUCCESS) {
      fetchProductRequest();
    }
  }, [fetchProductRequest, type]);

Я должен сделать вот так

    useEffect(() => {
        if (type.CREATE_PRODUCT_SUCCESS) {
          fetchProductRequest();
          const defaultValues = {
            image: "",
            name: "",
            price: 0,
            description: "",
            categoty: "",
          }
          setValues(defaultValues)
        }
      }, [fetchProductRequest, type

]);

Но это не работает

Я настраиваю свою форму из react-bootstrap

Спасибо за вашу помощь.

Ответ №1:

Просто добавьте :

 setValues({
    image: "",
    name: "",
    price: 0,
    description: "",
    categoty: "",
  })

после createProductRequest(values, imageAsFile);

Нравится :

  else {
      createProductRequest(values, imageAsFile);
  setValues({
    image: "",
    name: "",
    price: 0,
    description: "",
    categoty: "",
  })
    }

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

1. Но я не разрешаю подобное, потому что по какой-то причине это может привести к сбою!

2. У меня есть ответ на мой вопрос выше, не могли бы вы помочь мне, пожалуйста, проверьте его еще раз, и можете ли вы поддержать меня

Ответ №2:

Лучше не вызывать запросы из тела компонента, чтобы избежать проблем с синхронизацией данных в хранилище. Для этих целей используйте промежуточные программы, такие как redux-thunk или redux-sagas. В них после успешного ответа от сервера вызовите метод для очистки ввода:

 const defaultValues = {
  image: "",
  name: "",
  price: 0,
  description: "",
  categoty: "",
}

setValues(defaultValues)