gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 18:02:52 25 4
gpt4 key购买 nike

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

最佳答案

解决此问题的最常见模式是使用 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);
};

关于reactjs - 如何通过调用单个 onChange 函数将值插入状态 - react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32007598/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com