我有一个动态的子列表,它们是表单输入。
例如:
var FormRows = React.createClass({
getInitialState: function() {
return {
rows: []
}
},
createRows: function() {
this.props.values.maps(value){
rows.push(<FormRow ...handlers... ...props... value={value} />
}
},
addNewRow{
// add a new row
},
render: function() {
return (
<div>
{this.state.rows}
</div>
);
});
var FormRow = React.createClass({
getInitialState: function() {
return {
value: this.props.value || null
}
},
render: function() {
<input type='text' defaultValue={this.state.value} ...changeHandler ... }
}
});
这是一个简化版本,但其想法是动态表单,用户可以单击加号按钮来添加行,以及减号按钮,将行设置为可见到隐藏。
该状态嵌套了 n 层。真正让 children 了解情况并提交表格的最佳方法是什么?我可以使用 'ref' 将函数添加到 getFormValue(): { return this.state.value } 到 FormRow 按钮,但我不确定这是否是最佳实践方法。
我发现自己经常使用这种模式,一组未确定大小的子元素,需要向上传递状态。
谢谢
最佳答案
这根本不是一个愚蠢的问题,而且是在 React 中使用 Flux 原理的一个很好的例子。考虑这样的事情:
var App
// The "model"
var Model = {
values: ['foo', 'bar'],
trigger: function() {
App.forceUpdate()
console.log(this.values)
},
update: function(value, index) {
this.values[index] = value
this.trigger()
},
add: function() {
this.values.push('New Row')
this.trigger()
}
}
var FormRows = React.createClass({
addRow: function() {
Model.add()
},
submit: function() {
alert(Model.values);
},
render: function() {
var rows = Model.values.map(function(value, index) {
return <FormRow key={index} onChange={this.onChange} index={index} value={value} />
}, this)
return (
<div>{rows}<button onClick={this.addRow}>Add row</button><button onClick={this.submit}>Submit form</button></div>
)
}
})
var FormRow = React.createClass({
onChange: function(e) {
Model.update(e.target.value, this.props.index)
},
render: function() {
return <input type='text' defaultValue={this.props.value} onChange={this.onChange} />
}
});
App = React.render(<FormRows />, document.body)
我使用了一个使用数组和forceUpdate
的简化模型/事件示例,但这里的重点是让模型“拥有”表单数据。然后,子组件可以对该模型进行 API 调用,并使用新数据 (Flux) 触发整个应用程序的重新渲染。
然后只需在提交时使用模型数据即可。
关于javascript - Reactjs 管理有状态的子进程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27110439/