reactjs/redux -我这样做对吗?很少有关于代码的问题

reactjs/redux - I'm doing it right? Few questions about code

本文关键字：于代码 代码 问题 redux 这样做 reactjs      更新时间：2023-09-26

这段代码对吗?你会用不同的方式写这段代码吗?

具体来说:

A) 

email: document.getElementById('email').value,
password: document.getElementById('password').value

或onChange || this。参考文献?

B) 

@connect((state) => {
  return {
    email: state.email
  }
})

或与export default connect(*arrowFunction*)(SignIn)

C) 

<form onSubmit={this.handleSubmit.bind(this)}>

或在构造函数

中使用this.handleSubmit = this.handleSubmit.bind(this)

D)

connect from react-redux我是正确的吗?

完整代码

import React from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'
@connect((state) => {
  return {
    email: state.email
  }
})
class SignIn extends React.Component {
  handleSubmit (event) {
    event.preventDefault()
    this.props.dispatch({
      type: 'SIGN_IN',
      email: document.getElementById('email').value,
      password: document.getElementById('password').value
    })
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <div className='row'>
          <div className='column xs-12'>
            <label htmlFor='email'>E-mail</label>
            <input className='a' id='email' type='email' />
          </div>
          <div className='column xs-12'>
            <label htmlFor='password'>Heslo</label>
            <input className='a' id='password' type='password' />
          </div>
          <div className='column xs-12'>
            <div className='buttons'>
              <button className='b' type='submit'>Prihlásiť sa</button>
              <Link className='b' to='/account/sign-up'>Vytvoriť účet</Link>
            </div>
          </div>
        </div>
      </form>
    )
  }
}
export default SignIn

您的完整代码:

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { login } from 'modules/auth';
@connect(
  state => ({
    email: state.email
  }),
  { login }
)
class SignIn extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    const email = this.refs.email.value,
    const password = this.refs.password.value
    this.props.login(email, password)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className='row'>
          <div className='column xs-12'>
            <label htmlFor='email'>E-mail</label>
            <input className='a' id='email' type='email' ref='email' />
          </div>
          <div className='column xs-12'>
            <label htmlFor='password'>Heslo</label>
            <input className='a' id='password' type='password' ref='password' />
          </div>
          <div className='column xs-12'>
            <div className='buttons'>
              <button className='b' type='submit'>Prihlásiť sa</button>
              <Link className='b' to='/account/sign-up'>Vytvoriť účet</Link>
            </div>
          </div>
        </div>
      </form>
    )
  }
}
export default SignIn

And modules/auth.js file:

const LOGIN = 'your-app/auth/LOGIN';
export function login(email, password){
   return {
     type: LOGIN,
     email,
     password
   }
}

注意:如果我是你，我会使用redux-form作为我的输入

相关文章：