How to push values into state by calling single onChange function - react

Question

I am new to reactive. I am working on react+flux+alt with ES6. I have a form for creating new record.

Component

import React from 'react';
import { Input, Button, Glyphicon, ButtonToolbar } from 'react-bootstrap';
import AttributeSectionStore from 'stores/attributeSection/AttributeSectionStore';
import TextBoxesSet from '../descriptionTextBoxes';
import styles from 'scss/_common';

export default class AttributeSection extends React.Component {
  constructor(props) {
    super(props);
  }
  _onCreate = () => {
    console.log('___________', this.state);
  }
  onChangeName = (evt) => {
    this.setState({name: evt.target.value});
  };
  onChangeRank = (evt) => {
    this.setState({rank: evt.target.value});
  };
  static getPropsFromStores() {
    return recordStore.getState();
  }
  render() {
    return (
      <div className="container">
        <div className={styles.mainheader}>
          <h2 >New Record</h2>
        </div>
        <div className="col-md-9">
        <form className="form-horizontal">
          <div className="row">
            <div className="col-md-12">
              <Input type="text" label="Name" labelClassName="col-xs-2"
              wrapperClassName="col-xs-4" value={this.props.name}
              onChange={this.onChangeName}/>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12">
              <Input type="number" label="Rank" labelClassName="col-xs-2"
              wrapperClassName="col-xs-4" value={this.props.rank}
              onChange={this.onChangeRank}/>
            </div>
          </div>
          <div className="row">
            <div className="col-md-4 col-md-offset-2">
              <ButtonToolbar className={styles.formBtnGrp}>
                <Button bsStyle="primary" onClick={this._onCreate}>Create</Button>
                <Button type="reset">Cancel</Button>
              </ButtonToolbar>
            </div>
          </div>
        </form>
        </div>
      </div>
    );
  }
}
AttributeSection.propTypes = {
    name: React.PropTypes.string
    rank: React.PropTypes.number
};

Using above component now I'm getting data into state but form may have more than 2 fields. I'm using two functions to update state instead of that how can use single function to update state object?Is there any other best practice is there?

Answer 1

The most common pattern to solve this is using bind() to curry a value to the onchange callback. This is was @knowbody referenced (React.js: Identifying different inputs with one onChange handler)

An alternate, but similar, pattern is adding a second tag within the element to identify the name of the state property to change. I'll show an example using label from your code (obviously you want to use a dedicated tag since label is for display and would be localized).

onInputChanged(evt) {
    var newState = this.state,
        propName = evt.target.label.toLowerCase();

    newState[propName] = evt.target.value;
    this.setState(newState);
};