不同的handleChange()函数在组件中的每一个元素?(反应

Question

我想知道这是否是良好的做法，或者我是否应该设计这个应用程序不同。我特别关注两个"handleChange"函数，我想知道这是否可以以某种方式简化。当然，我们也欢迎其他的建议。

user-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方法，并且可以使用单个方法使用任意多的输入字段。

而且，我认为您不需要任何第三方软件包。

在你的渲染方法:

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

清洁。

Answer 2

注意复选框的工作方式不同!

来自React文档:

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
        [name]: value
    });
}

更简洁:

handleInputChange({ target }) {
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({ [target.name]: value });
}

Answer 3

两个handleChange方法是很好的，如果您希望在将来提交之前以某种方式修改该数据，则可能很有帮助。但是可以理解的是，为更多的表单字段创建所有这些方法可能是一个巨大的麻烦。幸运的是，有所谓的双向绑定帮助程序。据我所知，他们仍然在React的文档中显示mixins，所以你可能最好使用第三方库，如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>
    );
  }
}