Question

我有一个功能强大的React组件，我想在其中单击IonicIcon图标时触发一个功能。现在，存在两种不同的方法来执行该功能：我可以在{}括号内传递对我的方法的引用，也可以将其传递给函数，但是我不明白为什么它会在幕后起作用以及如何在幕后起作用，方法1或方法2哪个更好？ / p>

const checkIcon = () => {
    let showIcon = null;
    if (actualState.showInputField === false) {
        showIcon = (
           <IoIosAddCircleOutline onClick = {() => {
               toggleInput();
            } 
        }
            />
        )
    } else {
        showIcon = (
            <IoIosRemoveCircleOutline onClick = {toggleInput}
            />
        )
    }
    return showIcon;
}


const toggleInput = () => {
    changeState({...actualState, showInputField: !actualState.showInputField});
}

Answer 1

变量1 onClick={() => toggleInput()}最好用于将event对象之外的其他内容转发到函数中。

<div onClick={(event) => doSomething(event, index, extra_data)} />

变体2 onClick={toggleInput}是事件处理程序的标准用法。它将仅将event对象作为其第一个参数。

React：功能组件，将函数传递并执行到事件侦听器

1 个答案: