reactjs - 在 onClick 事件监听器中使用两个箭头函数

Question

这是代码，

import React, { useEffect, useState } from 'react'
import './Body.css'
export default function Navbar() {
    const [value, setvalue] = useState(0);
    const [value1, setvalue1] = useState(0);
    return (
        <>
            <div>
                <h1>Our App</h1>

                <div className="back">
                    <h3>Counter</h3>
                    <button onClick={() => [() =>{setvalue(value - 1)} , ()=>{setvalue1(value1 - 1)}] }> - </button>
                    <button>{value}</button>
                    <button>{value1}</button>
                    <button onClick={()=> [() =>{setvalue(value + 1)} , ()=>{setvalue1(value1 + 1)}] } > + </button>
                </div>
            </div >
        </>
    )
}

我在这里检查了如何在 onClick 事件中传递两个函数，这是我没有收到语法错误的唯一方法。

有人可以建议对此进行一些修改吗？

Answer 1

您的点击处理程序不会调用这两个函数，而是在数组中返回两个函数。

您只需要像这样调用两个函数:

function Navbar() {
  const [value, setvalue] = React.useState(0);
  const [value1, setvalue1] = React.useState(0);
  return (
      <div>
        <h1>Our App</h1>

        <div className="back">
          <h3>Counter</h3>
          <button
            onClick={() => {
              setvalue((value) => value - 1);
              setvalue1((value1) => value1 - 1);
            }}
          >
            {" "}
            -{" "}
          </button>
          <button>{value}</button>
          <button>{value1}</button>
          <button
            onClick={() => {
              setvalue((value) => value + 1);
              setvalue1((value1) => value1 + 1);
            }}
          >
            {" "}
            +{" "}
          </button>
        </div>
      </div>
  );
}

ReactDOM.render(<Navbar />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>