Question

这是我的情况，我查看了React代码：

   const {
      email, password, onSubmit, onChangeEmail, onChangePassword
    } = this.props;
    <form>
      <div className="form-group">
        <label >Email address</label>
        <input type="email" onChange={onChangeEmail} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
        <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div className="form-group">
        <label>Password</label>
        <input type="password" className="form-control" id="password" placeholder="Password" onChange={onChangePassword}/>
      </div>
          <button type="submit" className="btn btn-primary" onClick={onSubmit(email, password)}>Submit</button>

    </form>

我有：

const mapDispatchToProps = (dispatch) => ({
  onChangeEmail: (ev) => dispatch(changeEmail(ev.target.value)),
  onChangePassword: (ev) => dispatch(changePassword(ev.target.value)),
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  }
});

动作：

import { SIGNUP, CHANGE_EMAIL, CHANGE_PASSWORD } from './constants';

const signup = (email, password) => ({
  type: SIGNUP,
  email,
  password
});

const changeEmail = (email) => {
  return {
    type: CHANGE_EMAIL,
    email
  };
};

const changePassword = (password) => {
  return {
    type: CHANGE_PASSWORD,
    password
  };
};

export { signup, changeEmail, changePassword };

获取onSubmit操作的电子邮件和密码的最佳方法是什么？我应该像现在一样从商店状态获取电子邮件和密码吗？

Answer 1

如评论中所述，我不太可能使用redux来存储我的电子邮件和密码，在完成SignUp / signIn之后几乎不需要这些电子邮件和密码。因此，我将制作一个完整的状态小组件来临时保存电子邮件和密码，然后在提交表单时使用该状态准备表单数据。这是我要做的：

function Form({onSubmit}) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const handleSubmit = e => {
    e.preventDefault()
    onSubmit(email, password)
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label >Email address</label>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
        <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div className="form-group">
        <label>Password</label>
        <input type="password" className="form-control" id="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)}/>
      </div>
      <button type="submit" className="btn btn-primary" onClick={handleSubmit}>Submit</button>
    </form>
  )
}

const mapDispatchToProps = dispatch => ({
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  }
});

export default connect(mapDispatchToProps)(Form)

Answer 2

您可以将 email 和 password 值存储在 form 组件的状态内，并将它们仅存储在redux存储中一次提交后。

class LoginForm extends React.Component {
  this.state = { email: '', password: '' };

  handleEmailChange = (event) => this.setState({ email: event.target.value });

  handlePasswordChange = (event) => this.setState({ email: event.target.value });

  handleSubmitButton = () => {
    const { email, password } = this.state;
    const { onSubmit } = this.props;

    onSubmit(email, password);
  };

  render() {
    const {
      email, password, onSubmit, onChangeEmail, onChangePassword,
    } = this.props;

    return (
      <form>
       <div className="form-group">
         <label >Email address</label>
         <input type="email" onChange={handleEmailChange} className="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"/>
         <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
       <div className="form-group">
         <label>Password</label>
         <input type="password" className="form-control" id="password" placeholder="Password" onChange={handlePasswordChange}/>
       </div>
       <button type="submit" className="btn btn-primary" onClick={onSubmit(email, password)}>Submit</button>
      </form>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  onSubmit: (email, password) => {
    dispatch(signup(email, password));
  },
});

export default connect(mapDispatchToProps)(LoginForm)

Redux获取onsubmit事件的表单数据

2 个答案: