【问题标题】：Warning: expected an assignment or function call and instead saw an expression | Trying to manipulate onClick警告：期望一个赋值或函数调用，而是看到一个表达式 |试图操纵 onClick
【发布时间】：2021-03-14 05:25:51
【问题描述】：

我在尝试操纵 onClick 时遇到问题。如果 props.text 等于“更新”，我想执行两种方法（props.showConfirmModal 和 props.onClick），但出现以下错误：

期待一个赋值或函数调用，但看到一个表达式

const SaveButton = (props) => (
      <button
        type="submit"
        className="save-button"
        style={{
          marginTop: props.marginTop,
          marginRight: props.marginRight,
          marginLeft: props.marginLeft,
        }}
        onClick={
          props.text !== "Update"
            ? props.onClick
            : () => {
                props.showConfirmModal;
                props.onClick;
              }
        }
      >
        {props.text === undefined ? "Save" : props.text}
      </button>
);

点击：

onClick={
       props.text !== "Update"
       ? props.onClick
       : () => {
             props.showConfirmModal;
             props.onClick;
          }
}

我怎样才能让它正常工作？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题

您没有创建有效的处理函数，也没有正确调用回调。

onClick={
   props.text !== "Update"
   ? props.onClick
   : () => {
         props.showConfirmModal; // <-- not invoked!
         props.onClick; // <-- not invoked!
      }
}

解决方案

将您的逻辑简化为更DRY，即不要为两个逻辑分支重复props.onClick。

onClick={() => {
  props.onClick();
  props.text === "Update" && props.showConfirmModal();
}}

一些 linter/lint 规则可能抱怨第二行，如果是这样的话：

onClick={() => {
  props.onClick();
  if (props.text === "Update") props.showConfirmModal();
}}

【讨论】：

【解决方案2】：

您必须将您的函数更改为（否则它不是函数，只是错误所说的表达式）：

onClick={() => {
           props.text !== "Update"
           ? props.onClick
           : () => {
                 props.showConfirmModal;
                 props.onClick;
              }
    }}

【讨论】：