时间戳

首页 > 解决方案 > ReactJS：在提交时保存按钮值

javascript - ReactJS：在提交时保存按钮值

问题描述

我创建了一个表单，并且有两个提交按钮。现在我正在尝试保存按钮的值，以根据按钮的值进行两个不同的 api 调用。

我的问题是，有时按钮的值会导致“未定义”，因此单击它时什么也没有发生。

 return (
              <AvForm model={{}} onSubmit={saveEntity}>
    //.....
    <Button id="pdf" replace color="info" data-cy="entityCreatePDF" type="submit" onClick={buttonClicked} value="pdf">
                      <FontAwesomeIcon icon="save" />
                      &nbsp;
                      <span className="d-none d-md-inline"> PDF </span>
                    </Button>
                    &nbsp;
                    <Button color="primary" id="csv" data-cy="entityCreateCSV" type="submit" onClick={buttonClicked} value="csv">
                      <FontAwesomeIcon icon="save" />
                      &nbsp;<span className="d-none d-md-inline"> CSV </span>
                    </Button>
    
    )

  const buttonClicked = event => {
    console.log('event target', event.target.value);
    setButtonClick(event.target.value);
  };

  const saveEntity = (event, errors, values) => {
//....
 filteredEntities(params, sorting)
}


const filteredEntities = (params, sort) => {
    console.log('-- buttonClick --', buttonClick);
// there sometimes I receive undefined and so it doesn't enter in the if
    if (buttonClick === 'pdf') {
      getReportPDF(params, sort);
    }
    if (buttonClick === 'csv') {
      getReportCSV(params, sort);
    }
}

我应该采取一些措施来避免这种行为（即密钥导致未定义的值，因此不允许我采取任何行动？）。

谢谢

标签： javascriptreactjs

解决方案

简短的回答：

代替

  const buttonClicked = event => {
    console.log('event target', event.target.value);
    setButtonClick(event.target.value);
  };

和

  const buttonClicked = event => {
    console.log('event target', event.currentTarget.value);
    setButtonClick(event.currentTarget.value);
  };

为什么？有时您单击按钮本身，有时例如其中的图标 - 您单击的元素实际上是一个“目标”。然而，“currentTarget”允许使用事件监听器被分配到的元素。

推荐阅读