Reactjs管理有状态的孩子

我有一个动态的儿童列表，这是表单输入。Reactjs管理有状态的孩子

例如：

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层深。真正将这个国家从这些儿童中解救出来并提交表格的最好方法是什么？我可以使用'ref'添加一个函数getFormValue（）：{return this.state.value}到FormRow按钮，但我不确定这是否是最佳实践方式。

我发现自己经常使用这种模式，这是一组未定尺寸的儿童，需要通过状态。

由于

的输入，以一些模型

来源

2014-11-24 bonez

这根本不是一个愚蠢的问题，也是在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）触发整个App的重新渲染。

然后只需使用提交的模型数据。

演示：http://jsfiddle.net/ekr41bzr/

来源

2014-11-24 22:45:22 David

有趣。不知道你可以像这样封装状态并在该模型上调用方法。我希望这被记录在React文档中。 – bonez 2014-11-25 15:03:14

绑定值（例如建立骨架或通量）和提交检索从那里值，而不触及输入。

来源

2014-11-24 21:56:00 daniula

Reactjs管理有状态的孩子

回答

相关问题