Question

如何在每次单击按钮时更改钩子 isSignup 的状态并使用功能组件将其返回给 Auth.js？

我不知道如何将 return 语句包装在按钮内。我不断收到 _onClick 不是函数错误。

注意：Homepage.js 和 Auth.js 是功能组件，它们使用共享状态。

    // Homepage.js    
    const Homepage = () => {
        const [isSignup, setIsSignup] = useState(false);

        const handleClick = (e) => {
            if (e) {
                return <Auth isSignup={true}></Auth>
            }
            return <Auth isSignup={false}></Auth>
        }
        return (
            <div>
                <Button component={Link} to="auth" onClick={() => handleClick(false)}>
                    login
                </Button>
                <Button component={Link} to="auth" onClick={() => handleClick(true)}>
                    signup
                </Button>
            </div>
   }

// Auht.js
const Auth = (props) => {
    if(props.isSignup) {
    // display signup form....
}

Answer 1

onClick 需要一个函数，所以，

onClick={handleClick}

handleClick的签名是这样的，

const handleClick = (event : React.ChangeEvent<any>) => {}

从事件中，您可以获取按钮 id 或其他内容来确定操作。

功能组件：访问共享状态

1 个答案: