Question

我正在尝试创建一个具有两个按钮和一个计数器的Counter组件。一个按钮增加计数器，另一个按钮减少计数器。我不想创建两个单独的onClick处理程序，因此我试图通过onClick传递参数。事情是我以后在处理函数中无法访问它，因为它是未定义的。

计数器组件

import Button from './Button.jsx';

function Counter() {
    const [count, setCount] = useState(0);
    const increaseLabel = 'Increase';
    const decreseLabel = 'Decrese';

    function clickHandler(e) {
        const currentLabel = e.target.label;
        console.log(e.target) // <button label="Increase">Increase</button>
        console.log(e.target.label) // undefined

        if (currentLabel === increaseLabel) {
            setCount(count + 1)
        } else {
            setCount(count - 1)
        }
    }

    return (
        <div>
            <Button label={increaseLabel} onClick={clickHandler} />
            <Button label={decreseLabel} onClick={clickHandler} />
            <br/>
            <h2>{count}</h2>
        </div>
    )
}

按钮组件

import React from 'react';

function Button(props) {
    const label = props.label;
    return (
        <button label={label} onClick={props.onClick}>{label}</button>
    ) 
}

export default Button;

关于如何从处理程序中访问参数的任何想法？

Answer 1

您可以将其直接包装到匿名函数中，而不是直接将onClick指向class MyMessage { public string Os { get; set; } public string Type { get; set; } public int VersionCode { get; set; } public string Operand { get; set; } public bool ForceUpdate { get; set; } public string Title { get; set; } public string Message { get; set; } public string Action { get; set; } public string PositiveButton { get; set; } public string NegativeButton { get; set; } public string MessageType { get; set; } } [HttpPost] [Route("CreateStartMessage")] public IActionResult CreateStartMessage([FromBody]MyMessage clientMessage) { return Ok(resultApi); }，这将使您可以为clickHandler函数提供第二个参数：

clickHandler

Answer 2

我同意@dave，具体取决于label，因为属性不是很好，但是由于您将其作为道具传递，因此您无需与event费劲。可以在button的点击处理程序中使用此道具，并将其传递回clickHandler函数。

function Counter() {
  const [count, setCount] = React.useState(0);
  const increase = "Increase";
  const decrease = "Decrese";

  function clickHandler(type) {
    return type === increase
      ? setCount((prev) => prev + 1)
      : setCount((prev) => prev - 1);
  }

  return (
    <div>
      <Button label={increase} onClick={clickHandler} />
      <Button label={decrease} onClick={clickHandler} />
      <br />
      <h2>{count}</h2>
    </div>
  );
}

function Button({ label, onClick }) {
  return <button onClick={() => onClick(label)}>{label}</button>;
}

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

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

无法通过onClick传递参数

2 个答案: