Question

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

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

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

有人可以帮我处理下面表格的代码吗？

Answer 1

在标签中，我看到redux，因此我可以建议redux-form。在这里，您有一个https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner+for+MSBuild动态表单redux-form。

Answer 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)

你可以用你想要的任何东西做算法

Answer 3

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

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

// 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％在你的屏幕上，但这个想法应该是可以理解的。由于您的表单有一些不明确的要求，我只实现了前两个部分，因此您可以掌握这个想法。并且，没有风格：耸肩：

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

将动态表单建模为React组件

3 个答案: