Question

我想在单击按钮时将两个功能传递给按钮。第一个将组件的状态更改为true，然后执行第二个功能。当我使用类组件时，这是在设置状态后执行后续功能的语法，但不适用于功能组件。现在，当我添加第二个函数时，它们都不起作用。有不同的语法吗？

<button onClick={() => setStart(true), () => {countMiliseconds()}}>Start</button>

Answer 1

您可以创建useEffect挂钩，该挂钩将在状态更改为true后运行

    useEffect(() =>{ start && countMilliseconds() }, [ start ])

假定在初始渲染时将开始设置为false

Answer 2

您需要使用useEffect对start状态更改做出反应：

function MyAwesomeComponent() {
  const [start, setStart] = useState(false);
  useEffect(() => start && countMiliseconds(), [start]);

  return <button onClick = {
    () => setStart(true)
  } > Start < /button>
}

Answer 3

我想你可以这样做

<button

onClick={()=> {
  setStart(true);
  countMiliseconds();
}}

Start
</button>

反应：在功能组件中传递两个onclick函数

3 个答案: