reactjs - 如何通过调用单个 onChange 函数将值插入状态 - react

Question

我是响应式(Reactive)新手。我正在使用 ES6 开发 react+flux+alt。我有一个用于创建新记录的表格。

组件

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

现在使用上面的组件，我正在将数据输入状态，但表单可能有 2 个以上的字段。我正在使用两个函数来更新状态，而不是如何使用单个函数来更新状态对象？还有其他最佳实践吗？

Answer 1

解决此问题的最常见模式是使用 bind() 将值柯里化(Currying)到 onchange 回调。这是@knowbody 引用的 ( React.js: Identifying different inputs with one onChange handler )

另一种类似的模式是在元素中添加第二个标记，以标识要更改的状态属性的名称。我将展示一个使用您代码中的 label 的示例(显然您希望使用专用标签，因为 label 用于显示并且会被本地化)。

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

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