onClick 在反应中执行 function 和 setState

Question

I am stuck with this one function, I have an onClick that when a user clicks on it, it has to perform two things based on the If statement, one function and one state, but it doesnt seem to work:

在我的代码中，当它未被禁用时，我希望该行执行“doScore”以及“rolling: true”，但我不知道如何编写它才能工作

function RuleRow({ doScore, name, score, description, rolling }) {
const disabled = score !== undefined;

  return (
<tr
  className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
  onClick={disabled ? null : doScore}
>
  <td className="RuleRow-name">{name}</td>
  <td className="RuleRow-score">{disabled ? score : description}</td>
</tr >
);
}

Answer 1

function RuleRow({ doScore, name, score, description, rolling }) {
  const disabled = score !== undefined;

  const handleClick = () => {
      if (score !== undefined && rolling) {
          // do something
      } else {
          doScore();
      }
  };

  return (
    <tr
      className={`RuleRow RuleRow-${disabled ? "disabled" : "active"}`}
      onClick={handleClick}
    >
      <td className="RuleRow-name">{name}</td>
      <td className="RuleRow-score">{disabled ? score : description}</td>
    </tr >
  );
}

Answer 2

这不是最干净的解决方案，但您可以使用箭头 function 如果禁用则具有 null 或调用两个函数的 function 主体：

onClick={disabled ? null : (evt) => { doScore(evt); this.setState({ rolling: true }); }}

Recommended way to go would be to create a custom function that calls both functions or just set state rolling: true in the doScore function if possible.

Answer 3

1. 请指定什么是rolling prop（哪些值可以作为rolling传递）以及它应该如何影响RuleRow组件。 目前我没有看到在组件内部rolling 。
2. 从下面的代码片段可以看出，如果score不严格等于undefined ，您的 function doScore将在onClick上运行。 所以要么score等于undefined ，要么doScore无效 function 或者根本不是 function 。 所以我想doScore有一些东西。 请提供您在此道具中传递的内容。
3. 如果要更新 RuleRow 组件的父组件的RuleRow 。 你应该像const [score, setScore] = useState('initial score')这样写。 将RuleRow作为道具粘贴到setScore 。 然后在RuleRow里面写onClick={disabled? null: () => setScore('anything what you want')} onClick={disabled? null: () => setScore('anything what you want')} 。 父组件内的score将被更新， RuleRow将被重新渲染。

 function App() { const score = undefined; const disabled = score;== undefined. console,log('value of disabled id '; disabled)? return ( <table className="App"> <tr onClick={disabled: null. () => console,log("clicked")}>Hello; click me.</tr> </table> ); } const rootElement = document.getElementById("root"), ReactDOM;render( <App />, rootElement );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>