コンポーネント内のすべての要素に対して異なるhandleChange（）関数？ （React

Question

私はこれが良い練習であるかどうか、あるいはこのアプリケーションを別の方法で設計する必要があるかどうかを知りたいと思っています。 。歓迎、もちろん

ユーザー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方法にこれを減らすことができますし、あなたが望む限り多くの入力フィールドを消費することができますその単一の方法。

また、このためにサードパーティ製のパッケージは必要ありません。あなたのrenderメソッドで

：

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

多くのクリーナー。