Вызов двух функций с событием onClick - PullRequest
Новая
       53

Вызов двух функций с событием onClick

0 голосов
/ 21 июня 2020

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

В первой функции я вызываю метод handleChange(), в котором он устанавливает значение статуса, используя status: event.target.value

И во второй функции он должен выполнить метод onSubmit(), в котором я обновляю значение статуса в БД, которое ранее было установлено методом handleChange().

Вот мой фрагмент кода: 

const handleChange = (event) => {
    setValues({ ...values, error: false, status: event.target.value });
};
    
console.log(status);    

const onSubmit = (event) => {
    event.preventDefault();
    setValues({ status:"", error: false, loading: true });
    console.log(status);
    updateOrderStatus(match.params.orderId, user._id, token, status).then(
      (data) => {
        if (data.error) {
          setValues({  error: data.error, success: false });
        } else {
          setValues({  status: "", success: true });
          console.log("STATUS:",status);
        }
      }
    )};

    const createOrderForm = () => {
      return (
        <button
            type="submit"
            onClick={handleChange,onSubmit}
            value="Cancelled"
            className={
              status === "Cancelled"
                ? "btn btn-primary mr-3"
                : "btn btn-outline-success mr-3"
            }
          >
            Cancelled
      )

Вот мой снимок экрана и файлы журнала для того, что именно я пытаюсь сделать:

Первоначально После нажатия на кнопку «Отменено» он должен изменить статус

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

Похоже, вам нужно создать функцию более высокого порядка, которая вызывает две последующие функции: 

onClick={(event) => {
    handleChange(event)
    onSubmit(event)
}}

Или вы можете просто вызвать handleChange изнутри onSubmit: 

const onSubmit = (event) => {
event.preventDefault();
handleChange(event)
setValues({ status:"", error: false, loading: true });
console.log(status);
updateOrderStatus(match.params.orderId, user._id, token, status).then(
  (data) => {
    if (data.error) {
      setValues({  error: data.error, success: false });
    } else {
      setValues({  status: "", success: true });
      console.log("STATUS:",status);
    }
  }
)};

В этом случае вы можете просто вызвать onClick из события щелчка компонентов: 

onClick={onSubmit}

Также обратите внимание, что в обратном вызове .then вы звоните на setValues здесь: 

    setValues({  status: "", success: true });
    console.log("STATUS:",status);

Когда вызывается setValues, это вызывает повторную визуализацию компонента. При этом повторном рендеринге status, извлеченное из values, будет отражать пустую строку, которую вы добавили здесь: setValues({ status: "", success: true });.

Однако status в console.log("STATUS:",status) будет отражать значение status перед повторным рендерингом, то есть "pending".

0 голосов
/ 21 июня 2020

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

onClick={()=>{handleChange();onSubmit()}}

...