Question

我有一个非常简单的问题。我希望仅在单击第一个按钮时更改上层变量。然而，它总是在改变。我不明白我的逻辑错误在哪里。

export default function First() {
    const [first, setFirst] = useState('1')

    const test = (a) => {
        setFirst(a)
    }

    return (
        <div>
            <h1>{first}</h1>
            
            <Second onClick={test}/>
        </div>
    )
}


export default function Second( {onClick}) {
    const [second, setSecond] = useState('2')

    const  change = () => {
        second == '2' ? setSecond('1') : setSecond('2')
        console.log('2')
    }

    return (
        <div>
            <h1 style={{color:"green"}}>{second}</h1>

            <button onClick={change}>Test</button>
            <br/>
        <button onClick={onClick(second)}>Herz</button>
            <br/>
            {/* <button onClick={onClick(judas)}>Klick</button> */}

        </div>
    )
}

Answer 1

onClick={onClick(second)}

这表示立即调用 onClick(second)，并将其返回值传递给 onClick 道具。假设返回值是undefined，那么在点击发生后什么都不会发生。

改为这样做：

onClick={() => onClick(second)}

使用该代码，您将创建一个新函数并将该函数传递到 onClick。稍后，当点击发生时，您的函数将被调用并调用 onClick(second)

将参数传递给功能组件

1 个答案: