React Redux - 如何使用 material-ui 构建可以添加输入的表单？

Question

我正在使用 Material-ui 将 React-Flux-Bootstrap 应用程序的代码重构为 Redux。我真正想做的是有一个以一个输入开头的表单（即标题），然后能够通过单击一个按钮来添加多个额外的输入。这些输入都是相同的，但显然需要区分（即名称）。

理想情况下，我希望能够输入任意数量的名称，将它们收集为一个数组，然后将它们发送回我的数据库。我更关心实际创建表单本身和收集输入的代码。

如果有人能给我一个简单的例子，说明我将如何着手实现这一目标，我将不胜感激！

感谢您的宝贵时间

Answer 1

React "comments" 教程有一个很好的用户输入驱动列表增长的示例：https://facebook.github.io/react/docs/tutorial.html。您想查看 CommentList class.

要数据驱动表单字段列表，您可以这样做：

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 的闭包来展示可变性，但还有其他方法可以实现这一点。

React Redux - 如何使用 material-ui 构建可以添加输入的表单？

React Redux - How do I build a form with material-ui that I can add inputs to?

reactjs

redux

material-ui