React Redux - 如何使用material-ui構建可添加輸入的表單？

我正在將React-Flux-Bootstrap應用程序的代碼重構爲Material-ui的Redux。我真正想要做的是有一種形式，從一個輸入開始（即標題），然後能夠通過單擊按鈕添加多個額外的輸入。這些輸入都是相同的，但顯然需要區分（即名稱）。React Redux - 如何使用material-ui構建可添加輸入的表單？

理想情況下，我希望能夠輸入儘可能多的名稱，然後將它們作爲數組收集起來，然後將它們發送回我的數據庫。我更關心實際創建表單本身和收集輸入的代碼。

如果有人能給我一個快速的例子，我可能會開始實現這一點，我會非常感激！

感謝您的時間

來源

2016-03-11 BeeNag

的響應「意見」教程有用戶輸入駕駛越來越多的一個很好的例子：https://facebook.github.io/react/docs/tutorial.html。你想看看CommentList類。

要將數據驅動表單字段列表中，你可以做這樣的事情：

getInitialState() { 
    return { 
    formFields: [{key: "one", value: "first"}, {key: "two", value: "second"}] 
    } 
}, 

getOnChange(key) { 
    let handler =() => { 
    let newValue = this.refs[key].getValue() 
    let newState = {} 
    newState[key] = newValue 
    this.setState(newState) 
    } 
    return handler 
}, 

render() { 
    return (
    <Paper> 
     {this.state.formFields.map((item, index) => { 
     return (<TextField ref={item.key} key={item.key} defaultValue={item.value} onChange={this.getOnChange(item.key)}/>) 
     })} 
    </Paper> 
) 
}

我用了一個封閉的的onChange證明變異，但也有其他的方法來做到這一點。

來源

2016-03-11 14:49:46

嗨拉里，我想要做的是略有不同，因爲我想在窗體上生成多個輸入。我懷疑當涉及到將數據發佈到服務器時，我會實現類似於該教程的東西（所以感謝我指出了這一點），但是可以指向一些能夠幫助我生成可以添加動態投入量？因爲我正在重構flux函數，所以我可以用它作爲基礎，但它使用bootstrap而不是material-ui，代碼有點混亂！ – BeeNag

OIC。我用一種方式更新了我的答案。關鍵是使用Array.map（）函數。 –

@BeeNag，這有幫助嗎？如果是這樣，你能接受答案嗎？ –

React Redux - 如何使用material-ui構建可添加輸入的表單？

回答

相關問題