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管理有狀態的孩子

回答

相關問題