将动态表单建模为 React 组件答案

【问题标题】：Modelling Dynamic Forms as React Component将动态表单建模为 React 组件
【发布时间】：2018-11-10 20:26:04
【问题描述】：

如何将动态表单建模为 React 组件？

例如，我想创建一个如下图所示的表单：

如何将其建模为 React 组件？
如何为该组件添加动态性？例如，单击“+ 添加”按钮会创建另一个空文本框，并将其放在其他已呈现的文本框的正下方（如下图所示）。

有人可以帮我编写下面表格的代码吗？

【问题讨论】：

标签： html css twitter-bootstrap reactjs

【解决方案1】：

不同之处在于，除了表单值的状态，我们还需要处理表单形状/结构的状态。

如果您通过遍历某个表示表单形状的状态对象来呈现输入，那么新输入只是此状态对象中的一个新条目。您可以通过管理该状态对象轻松地在表单上添加或删除输入字段。例如。你可以写这样的东西（伪反应代码）：

// inputs state of math and algorithms
const state = { math: [obj1, obj2], algorithms: [obj1, obj2] } // obj ~= {id, value}
// render math inputs
const mathMarkup = state.math.map(obj => <input value={obj.value} onChange={...} />)
// add handler for math field
const addMath = () => setState(prevState => ({ math: [...prevState.math, newObj]}))

这是这种形式的示例 - codesandbox。它不是你屏幕上的 100%，但这个想法应该是可以理解的。由于您的表单有一些不清楚的要求，我只实现了前两个部分，因此您可以掌握这个想法。而且，没有样式 :shrug:

此外，您可以提取renderXyz 方法来分离组件，并改进状态形状以满足您的需求。

【讨论】：

【解决方案2】：

我可以帮助你减少方式

      import React , {Component} from 'react'
  import { connect }from 'react-redux'

  class main extends Component{
    render(){
      return(
        <div>
                <BaselineMath/>
                <Algorithms />
            </div>
      )
    }
  }
const mapStateToProps = ({}) => {
    return{}
  }
  export default connect (mapStateToProps,{})(main)



    class BaselineMath extends Component{
        constructor(props){
            super(props);
            this.state={rows:[1]}
        }
        _getRows{
            return this.state.rows.map((res,key)=>{
                return <input placeholder="etc..."/>
            })
        }
        onClickAdd(){
            let rows = this.state.rows
            rows.push(1)
            this.setState({
                rows
            })
        }
        render(){
            return(
            <div>
                <Button onClick={this.onClickAdd.bind(this)}>ADD row</Button>
                {this._getRows()}
            </div>
            )
        }
    }

    export default (BaselineMath)


    class Algorithms extends Component{
        constructor(props){
            super(props);
            this.state={rows:[1]}
        }
        _getRows{
            return this.state.rows.map((res,key)=>{
                return <input placeholder="etc..."/>
            })
        }
        onClickAdd(){
            let rows = this.state.rows
            rows.push(1)
            this.setState({
                rows
            })
        }
        render(){
            return(
            <div>
                <Button onClick={this.onClickAdd.bind(this)}>ADD row</Button>
                {this._getRows()}
            </div>
            )
        }
    }

    export default (Algorithms)

你可以做任何你想做的算法

【讨论】：

这不是太多的硬编码和代码重复吗？
我认为对于静态字段来说这是一种有用的方法，您也可以通过迭代数组并链接到另一个组件来动态地做到这一点

【解决方案3】：

在标签中我看到redux，所以我可以建议redux-form。在这里，您有一个 example 的动态表单redux-form。

【讨论】：