首页 > 解决方案 > 在 React 的上下文中传递带参数的函数

问题描述

我在上下文文件中有带参数的函数,参数需要在 onClick 上传递,但它显示错误“onLogin 不是函数”

上下文.js

export const AuthContext = createContext(undefined);

export default Context({children}) {
    const CheckUser = (Username, Password) => {
        const Data = {
            email: Username,
            password: Password
        }
        API.post('/login', Data)
            .then( response => {
                console.log(response.data);
            })
            .catch( error => {
                console.log(error.message);
            })
    }

    <AuthContext.Provider value={{onLogin: CheckUser}}>
        {children}
    </AuthContext.Provider>
}

Child.js

const onLogin = useContext(Context);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

<form>
     <TextField onChange={e => setUsername(e.target.value)} />
     <TextField onChange={e => setPassword(e.target.value)} />
     <Button onClick={() => onLogin(username, password)}>Login</Button>
</form>

标签: reactjsreact-hooksuse-context

解决方案


推荐阅读