首页 > 解决方案 > Onclick 功能仅在第二次单击时起作用 - React js

问题描述

我正在分配 Onclick 事件以触发我的消息发送 api 功能的 div

           <div className="sendDiv"
                onMouseOver={() => hoverSend()}
                onMouseLeave={() => setSendOn(true)}
                onClick={() => replyMessage(enquiryId)}>

我的回复消息函数,我保存我的 api 路由并调用另一个函数 (getOneticket) 来刷新我的消息。

在这里,我将使用输入框的 OnChange 事件中的值设置我的“messageState”,并将其传递给我的 api 补丁。

function replyMessage(currentId) {
    console.log("reply mesaage");
    const replyData = {
      message: messageState,
    };
    axios
      .patch(`admin/enquiry?enquiryID=${currentId}`, replyData)
      .then((res) => {})
      .catch((err) => {
        console.log(err, "error");
      });
    getOneticket(currentId);
}

我正在处理 onChange 事件和 setMessageState 的输入框

                      <TextareaAutosize
                        maxRows={3}
                        aria-label="maximum height"
                        placeholder="Type a message.."
                        className="typetext"
                        value={messageState}
                        onChange={(e) => setMessageState(e.target.value)}
                      />

我的 getOneTicket 函数,我只是从个人 id 加载数据

 function getOneticket(cookID) {
    console.log('get one ticket called from send button click')
    console.log(cookID, "ticket id");
    axios
      .get(`admin/enquiry/get/one?enquiryID=${cookID}`)
      .then((res) => {
        console.log(res, "single res");
        dispatch({
          type: actionTypes.GET_SINGLE_ENQUIRIES,
          payload: res.data.enquiry,
        });
      })
      .catch((err) => {
        console.log(err, "error");
      });
    setEnquiryId(cookID);
  }

标签: javascriptreactjs

解决方案


推荐阅读