Javascript 如何在React中渲染动态窗体

我正在尝试向用户呈现一个动态表单。我正在使用react js。这是我的逻辑：我首先向用户显示一个数字选择器和一个按钮。用户可以使用数字选择器选择1-10。在他们选择数字后，他们单击按钮，然后我希望页面呈现一个表单，其中输入字段的数量是用户从数字选择器中选择的数字。我想在for循环中返回输入字段。但是,

console.log(allTerms);

只打印两次，页面上只显示一个输入字段。当循环试图渲染第二个输入字段时，它似乎被卡住了。以下是我的react组件：

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

import React，{Component}来自“React”
导出类ShowTerms扩展组件{
状态={
numberOfTerms:'0'，
addTerms：false
}
addTerms=（事件）=>{
event.preventDefault（）；
this.setState（{addTerms:true}）；
}
onChange=（event）=>this.setState（{[event.target.name]：event.target.value}）；
render（）{
if（this.state.addTerms===false）{
返回(
选择要添加的术语数量：
)
}else if（this.state.addTerms===true）{
var allTerms=this.state.numberOfTerms；
对于（var i=0；i

---

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

您不能在渲染中使用for循环-它需要返回表达式，而不是像

for

这样的语句。因此，您需要在数组上使用

映射

，如下所示：

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

const arr=新数组（this.state.numberOfTerms）；
arr.map（（i）=>(
));

参见

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

试试这个

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

Array.from（Array（this.state.numberOfTerms））.map（（）=>
)

这是我使用的解决方案。首先，我获取用户选择的数字的值（存储在此.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})
    }

addTerms=（事件）=>{
event.preventDefault（）；
this.setState（{addTerms:true}）；
var检验=[]；
for（var i=0；i

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

render（）{
if（this.state.addTerms===false）{
返回(
选择要添加的术语数量：
)
}else if（this.state.addTerms===true）{
返回(
this.state.numberOfTerms.map（（i）=>(
)))
} 
}

谢谢你的建议。我最终使用了与此非常类似的解决方案；数组的想法让我思考，最后我把我的状态改成了一个数组，并在其中循环。谢谢你的帮助！！