2016-10-28 304 views
1

我想知道这是否是好的做法,或者我是否应该以不同的方式设计这个应用程序,我特别关注两个'handleChange'函数,并且想知道这是否可以简化。欢迎,当然组件中每个单独元素的不同handleChange()函数? (React

用户add.js:如果要提交或使之前以某种方式修改,在未来的数据

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import {createUser} from '../actions/index' 

class UserCreate extends Component { 

    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      inputText: 'Helluuuu' 
     } 
    } 

    handleChangeFirstName(event) { 
     console.log(event.target.value); 
     this.setState({ 
      inputTextFirstName: event.target.value 
     }) 
    } 

    handleChangeLastName(event) { 
     console.log(event.target.value); 
     this.setState({ 
      inputTextLastName: event.target.value 
     }) 
    } 

    render() { 
     return (
      <div> 
       <h2> Add User </h2> 

       <table className="userTable"> 
       <tbody> 
       <tr> 
        <td>First Name:</td> 
        <td>Last Name:</td> 
       </tr> 

       <tr> 
        <td> 
         <input type="text" 
          placeholder="Hello!" 
          value={this.state.inputTextFirstName} 
          onChange={this.handleChangeFirstName.bind(this)}/> 
        </td> 
        <td> 
         <input type="text" 
          placeholder="Hello!" 
          value={this.state.inputTextLastName} 
          onChange={this.handleChangeLastName.bind(this)} /> 
        </td> 
       </tr> 
       </tbody> 
       </table> 


       <button onClick={() =>this.props.createUser()}>Submit</button> 

      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     user: state.activeUser 
    }; 
} 

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({createUser: createUser}, dispatch); 
} 

export default connect(mapStateToProps, matchDispatchToProps)(UserCreate); 
+0

你为什么初始化状态'inputText'。我没有看到它被消费在任何地方? – Umair

+0

你究竟是什么意思?我将'Helluuu'放在构造函数的输入文本中? –

+0

哦,对不起,你没错,我没有把它改名为InputTextFirstName等。谢谢! –

回答

1

两个handleChange方法都很好,可能有帮助,但可以理解的就可以了。为更多的表单域创建所有这些方法是一件非常麻烦的事情,幸运的是有所谓的two-way binding helpers。了解他们仍然显示阵营的文档中混入,所以你可能与第三方库更好像react-link-state

import React from 'react'; 
import linkState from 'react-link-state'; 

export default MyForm extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     username: '', 
     password: '', 
     toggle: false 
    }; 
    } 

    render() { 
    console.log(this.state); 

    return (
     <form> 
     <input type="text" valueLink={linkState(this, 'username')} /> 
     <input type="password" valueLink={linkState(this, 'password')} /> 
     <input type="checkbox" checkedLink={linkState(this, 'toggle')} 
     </form> 
    ); 
    } 
} 
2

当然,你可以将此减少到只有一个handleChange方法,可以消耗你想尽可能多的输入字段那个单一的方法。

此外,我不认为你需要任何第三方包。

在渲染处理方法:

<input 
    type="text" 
    name="firstName" 
    placeholder="First Name!" 
    value={this.state.firstName} 
    onChange={this.handleChange.bind(this)} 
/> 

<input 
    type="text" 
    name="lastName" 
    placeholder="Last Name!" 
    value={this.state.lastName} 
    onChange={this.handleChange.bind(this)} 
/> 

办理变更方法

handleChange(e) { 
    this.setState({ [e.target.name] : e.target.value }); 
} 

干净多了。

相关问题