无法通过 onClick 传递参数

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

您可以将它包装在一个匿名函数中，而clickHandler直接将 onClick 指向clickHandler ，这将允许您为clickHandler函数提供第二个参数：

    return (
        <div>
            <Button label={increaseLabel} onClick={(e) => clickHandler(e, "foo")} />
            <Button label={decreaseLabel} onClick={(e) => clickHandler(e, "bar")} />
            <br/>
            <h2>{count}</h2>
        </div>
    )

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" />