ReactJs 聚合来自组件的数据
ReactJs aggregate data from components
将一个大组件拆分为多个较小的组件并聚合其数据的最佳方法是什么?我想在 FormComponent 中访问 BillingDataComponent、NameComponent 和 AddressComponent 的状态。
例:
var FormComponent = React.createClass({
_onClick: function() {
// Access child data here
var name = ???
var address = ???
var billingData = ???
ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren);
},
render: function() {
return (
<div>
<form>
<NameComponent name="Maybe the name is already set?" />
<AddressComponent />
<BillingDataComponent />
<button onClick={this._onClick} >Submit</button>
</form>
<div>
);
}
});
var NameComponent = React.createClass({
_onChange: function(e) {
this.setState({
value: e.target.value
});
},
render: function() {
return (
<div>
<input type="text" value={this.state.value} onChange={this._onChange} />
</div>
);
}
});
// AddressComponent and BillingDataComponent similiar
你应该让FormComponent
拥有数据,并将其作为道具传递给其他组件。当数据发生更改时,子项应将更改传播到以下形式:
var FormComponent = React.createClass({
getInitialState: function() {
return {
name: ""
};
},
_onClick: function() {
// Access child data here
var name = ???
var address = ???
var billingData = ???
ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren);
},
_onNameChange: function(name) {
this.setState({
name: name
});
},
render: function() {
return (
<div>
<form>
<NameComponent onChange={this._onNameChange} value={this.state.name} />
<AddressComponent />
<BillingDataComponent />
<button onClick={this._onClick} >Submit</button>
</form>
<div>
);
}
});
var NameComponent = React.createClass({
_onChange: function(e) {
this.props.onChange(e.target.value);
},
render: function() {
return (
<div>
<input type="text" value={this.props.value} onChange={this._onChange} />
</div>
);
}
});
// AddressComponent and BillingDataComponent similiar
相关文章:
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React-将jSON数据传递给子组件的子组件
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 在reactjs组件中预加载数据
- 具有大型数据集的组件仅在 IE11/Edge 上运行缓慢
- 使用数据数组创建多个类似组件
- ReactJS - 输入组件数据传递
- 反应:从父组件获取子组件数据
- Mithril - 在子组件修改父组件数据后重新排序子组件数组
- 反应多页,组件数据传递
- 如何在组件外部访问v-if中的子组件数据
- 聚合物网络组件数据绑定一个js对象/数组
- Vue,js Vue -router 2组件数据没有更新
- 访问自定义组件数据/方法
- 从web-api在每个页面上生成组件数据
- 从Vue组件数据计算函数
- React组件,在父组件中验证子组件数据
- 如何在Vue.js中现有的基础上创建新的组件数据
- React.js:在添加时重新渲染组件数据
- JQuery在加载react js组件数据时触发两次滚动