reactjs - 使用 React Redux 提交表单

Question

我正在使用 react-redux 钩子。我想在提交表单时进行一些验证后调度一个动作。但是我不能usedispatch()在函数组件之外调用钩子。有什么方法可以使用来调度动作usedispatch()吗？

我的代码如下所示：

import React, { Component } from 'react';
import { register } from '../../actions/auth';
import { useDispatch, useSelector } from "react-redux";

let state = {
    username: '',
    password1: '',
    password2: '',

}
const onSubmit = (e) => {
    e.preventDefault()
    const dispatch = useDispatch();
    if (state.password1 === state.password2) {
        dispatch(register(state))
    }
    else {
        console.log('Psw did not matched.')
    }
}
const onChange = (e) => {
    let field_name = e.target.name;
    state[field_name] = e.target.value;
}
const Register = () => {
    return (
        <div className="col-md-6 m-auto">
            <div className="card card-body mt-5">
                <h2 className="text-center">Register</h2>
                <form encType="multipart/form-data" onSubmit={onSubmit}>
                    <div className="form-group">
                        <label>Username</label>
                        <input
                            type="text"
                            className="form-control"
                            name="username"
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <label> Password</label>
                        <input
                            type="password"
                            className="form-control"
                            name="password1"
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <label>Confirm Password</label>
                        <input
                            type="password"
                            className="form-control"
                            name="password2"
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    );
}
export default Register;

我收到一个错误，即 React Hooks 不能在函数组件之外使用，这很明显。我正在寻找一种register在提交表单时进行一些验证后调度操作的方法。

标签： reactjsreduxreact-reduxreact-hooks

Answer 1

由于您正在编写 React 组件，因此如果您在组件内定义状态和其他功能，这将是有意义的。这样你就可以使用 hook 和 useDispatch 了。您还可以控制输入字段而不是让它们不受控制

import React, { Component } from 'react';
import { register } from '../../actions/auth';
import { useDispatch, useSelector } from "react-redux";


const Register = () => {
    const [state, setState] = useState({
            username: '',
            password1: '',
            password2: '',
    });
    const onChange = (e) => {
        let field_name = e.target.name;
        let field_value = e.target.value;
        setState(prev => ({...prev, [field_name]: field_value});
    }
    const dispatch = useDispatch();
    const onSubmit = (e) => {
        e.preventDefault()
        if (state.password1 === state.password2) {
            dispatch(register(state))
        }
        else {
            console.log('Psw did not matched.')
        }
    }
    return (
        <div className="col-md-6 m-auto">
            <div className="card card-body mt-5">
                <h2 className="text-center">Register</h2>
                <form encType="multipart/form-data" onSubmit={onSubmit}>
                    <div className="form-group">
                        <label>Username</label>
                        <input
                            type="text"
                            className="form-control"
                            name="username"
                            value={state.username}
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <label> Password</label>
                        <input
                            type="password"
                            className="form-control"
                            name="password1"
                            value={state.password1}
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <label>Confirm Password</label>
                        <input
                            type="password"
                            className="form-control"
                            name="password2"
                            value={state.password2}
                            onChange={onChange}
                            required/>
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    );
}
export default Register;