Question

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

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

如果有人能给我一个快速的例子，说明我将如何开始实现这一目标，我将非常感激！

感谢您的时间

Answer 1

The React＆＃34;评论＆＃34;教程有一个很好的用户输入示例，可以推动不断增长的列表：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的闭包来演示可变性，但还有其他方法可以实现这一点。

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

1 个答案: