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

Posted 2023-02-22

【中文标题】如何通过调用单个 onChange 函数将值推入状态 - 反应

【英文标题】：How to push values into state by calling single onChange function - react

【发布时间】：2015-11-07 13:32:38

【问题描述】：

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

【问题讨论】：

查看***.com/questions/21029999/…

@knowbody 谢谢它很有用

作为旁注，您可以编写您的函数，例如：onChangeRank(ext) more here

【参考方案1】：

解决此问题的最常见模式是使用bind() 将值curry 到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);
;