如何在 React 中呈现动态表单

Question

我正在尝试向用户呈现动态表单。我正在使用反应 js。这是我的逻辑：我首先向用户显示一个数字选择器和一个按钮。用户可以使用数字选择器从 1 - 10 中进行选择。选择号码后，他们单击按钮，应该发生的是我希望页面呈现一个表单，其中输入字段的数量作为从号码选择器中选择的数字，由用户选择。我想 return for 循环中的输入字段。然而，

console.log(allTerms);

只打印了两次，页面上只显示了一个输入框。似乎循环在尝试呈现第二个输入字段时卡住了。这是我的反应组件：

import React, { Component } from 'react'

export class ShowTerms extends Component {
    state = {
        numberOfTerms: '0',
        addTerms: false
    }

    addTerms = (event) => {
        event.preventDefault();
        this.setState({addTerms: true});
    }

    onChange = (event) => this.setState({ [event.target.name]: event.target.value});

    render() {
        if(this.state.addTerms === false) {
        return(
            <div>
            <h2>Choose how many terms you wish to add:</h2>
            <input type="number" name="numberOfTerms" min="1" max="10" value={this.state.numberOfTerms} onChange={this.onChange} required></input>
            <input type="button" onClick={this.addTerms}></input>
            </div>
        )
        } else if(this.state.addTerms === true) {
        var allTerms = this.state.numberOfTerms;
            for (var i = 0; i < allTerms; i++) {
                console.log(allTerms);
                return (
                    <div>
                    <input type="text" value="this is a test"></input>
                    </div>
                )  
            }
        } 
    }
}

export default ShowTerms

关于为什么 for 循环只显示一个输入字段有什么想法吗？我的逻辑是否有错误，或者是否有更好的方法来显示这种动态形式？提前感谢您的任何想法。

Answer 1

您不能在渲染中使用 for 循环 - 它需要返回的表达式，而不是像 for 这样的语句。所以你需要在数组上使用 map，如下所示：

const arr = new Array(this.state.numberOfTerms);
arr.map((i) => (
  <div key={i}>
     <input ...></input>
  </div>));

见https://blog.cloudboost.io/for-loops-in-react-render-no-you-didnt-6c9f4aa73778

Answer 2

试试这个

Array.from(Array(this.state.numberOfTerms)).map(()=>
   <div>
      <input type="text" value="this is a test"></input>
    </div>
)

Answer 3

所以这是我使用的解决方案。首先，我获取了用户选择的数字值（存储在 this.state.numberOfTerms 中）并在我添加到 addTerms 函数的循环中使用该数字，如下所示：

addTerms = (event) => {
        event.preventDefault();
        this.setState({addTerms: true});
        var test = [];
        for(var i = 0; i < this.state.numberOfTerms; i++) {
            test.push(i);
        }
        this.setState({numberOfTerms: test})
    }

这里的想法是，当用户选择他们想要的号码，然后单击按钮时，将调用此函数。调用此函数时，它会运行一个循环，用与用户选择的元素数相同的元素数填充一个数组。然后我将该数组（名为 test）设置为 state（设置 this.state.numberOfTerms 中的当前值）。现在我可以自由地遍历现在存储在 state 中的数组，它为我的 state 数组的每个元素创建一个输入字段（这也应该是用户最初选择的数字）。正如我的问题的其他答案所指出的，for 循环在这里不兼容，因为 return 语句在 for 循环完成之前终止了它。相反，我需要通过数组进行映射。这是我的渲染方法，在第二个 return 语句中进行了更改：

render() {
        if(this.state.addTerms === false) {
        return(
            <div>
            <h2>Choose how many terms you wish to add:</h2>
            <input type="number" name="numberOfTerms" min="1" max="10" value={this.state.numberOfTerms} onChange={this.onChange} required></input>
            <input type="button" onClick={this.addTerms}></input>
            </div>
        )
        } else if(this.state.addTerms === true) {
            return (
            this.state.numberOfTerms.map((i) => (
                <div key={i}>
                    <input type="text"></input>
                </div>
            )))
        } 
    }

如何在 React 中呈现动态表单

How to render a dynamic form in React

javascript

for-loop

return

render

reactjs