Question

我是新手。我正在研究react + flux + alt和ES6。我有一张创建新唱片的表格。

组件

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个以上的字段。我使用两个函数来更新状态而不是如何使用单个函数来更新状态对象？还有其他最佳实践吗？

如何通过调用单个onChange函数将值推入状态 - 反应

0 个答案: