reactjs - React 状态钩子，传入方法和参数 onClick

Question

我试图用“onClick”传递一个方法及其所需的参数，但它不起作用。

我读到你可以这样做： onClick={() => handleSort(column)} 但在渲染调用中使用箭头函数的问题是它每次都会创建一个新函数，最终导致不需要重新渲染。

function ToggleSwitch() {
  const [values, setValues] = React.useState({
    astma: "off",
    
  });

  function toggle (nameIn, valueIn){
      console.log("Toggle")
    const {name, value} = (nameIn, valueIn);
    if (value === "off") {
      setValues({
        ...values,
        [name]: "on",
      });
    } else if (value === "on") {
      setValues({
        ...values,
        [name]: "off",
      });
    }
  };
  
  //return just the function and make the html in the page and on klick use the toggle function
  //remember to export values as well.
  return (
    <div
      className={`switch ${values.astma}`}
      onClick={toggle("astma", values.astma)}
      id={"astma"}
      name={"astma"}
    />
  );
}

ReactDOM.render(<ToggleSwitch />, document.getElementById("root"));

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

标签： reactjs

Answer 1

如果您出于某种原因不想使用箭头。您可以改用柯里化方式：

function ToggleSwitch() {
  const [values, setValues] = React.useState({
    astma: "off",
    
  });

  const toggle = (nameIn, valueIn) => e => {
    console.log("Toggle", nameIn, valueIn)
    const {name, value} = (nameIn, valueIn);
    if (value === "off") {
      setValues({
        ...values,
        [name]: "on",
      });
    } else if (value === "on") {
      setValues({
        ...values,
        [name]: "off",
      });
    }
  }
  
  //return just the function and make the html in the page and on klick use the toggle function
  //remember to export values as well.
  return (
    <div
      className={`switch ${values.astma}`}
      onClick={toggle("astma", values.astma)}
      id={"astma"}
      name={"astma"}
    >Currying is cool. Click ME!</div>
  );
}

ReactDOM.render(<ToggleSwitch />, document.getElementById("root"));

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