reactjs / redux - 我做得对吗？关于代码的几个问题

Question

这段代码对吗？你会以不同的方式编写这段代码吗？

特别是这部分：

A）

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

或使用onChange || this.refs？！

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）

从react-redux连接创建this.props.dispatch？我没错？

完整代码

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

Answer 1

我的完整代码：

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

和modules/auth.js档案：

const LOGIN = 'your-app/auth/LOGIN';

export function login(email, password){
   return {
     type: LOGIN,
     email,
     password
   }
}

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