組件中每個單獨元素的不同handleChange（）函數？ （React

Question

我想知道這是否是好的做法，或者我是否應該以不同的方式設計這個應用程序，我特別關注兩個'handleChange'函數，並且想知道這是否可以簡化。歡迎，當然

用戶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); 

Answer 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> 
    ); 
    } 
} 

Answer 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 }); 
} 

乾淨多了。