Reactjs 动态文本输入

如果这是一个非常简单/愚蠢的问题，我会做出非常抱歉的反应

因此，我正在制作一个应用程序，您可以提供几个月，并根据需要显示的文本字段的月数。例如，5个月=5个新文本字段。我该怎么做呢？我尝试过各种方法，但都没有用，所以我在这里问这个问题。谢谢你的帮助

class MonthlyInputs extends React.Component {
  render() {
    let monthInputs = [1, 2, 3];
    let items = [];

    function updateInputs(event) {
      monthInputs = [];
      for (let i = 0; i < event.target.value; i++) {
        monthInputs.push(i);
      }
      console.log(monthInputs)
      for (let i = 0; i < monthInputs.length; i++) {
        items.push(<li key={i}>list item {i}</li>);
      }
    }

    for (const [index, value] of monthInputs.entries()) {
      items.push(<li key={index}>{value}</li>)
    }

    return (
      <div>
        <input onChange={updateInputs} />
        {items}
      </div>
    )
  }
}

class MonthlyInputs扩展React.Component{
render（）{
设monthInputs=[1,2,3]；
设项目=[]；
函数更新输入（事件）{
monthInputs=[]；
for（设i=0；i列表项{i}）；
}
}
for（monthInputs.entries（）的常量[索引，值]）{
items.push（
{value}
）
}
返回(
{items}
)
}
}

我尝试了您试图实现的功能

如果你有任何问题，请告诉我

---

考虑将变量保存在状态。此外，不应在render Function中声明函数。以下是代码：

class App extends Component{

constructor(){
  super();
  this.state = {
   monthInputs: [],
  }
}

   updateInputs = (event) => {
    let  monthInputs = [];
    for (let i = 0; i < event.target.value; i++) {
      monthInputs.push(i);
    }

    this.setState({
      monthInputs
    })
  }

  render(){
    const {monthInputs} = this.state;

    return(
      <div>
      <input  type="number" value={monthInputs} onChange={this.updateInputs} />
      {monthInputs.length > 0 && monthInputs.map((number, index)=> 
      <li key={number}>{number}</li> )}
    </div>
    )
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
monthInputs:[]，
}
}
更新输入=（事件）=>{
设monthInputs=[]；
for（设i=0；i0&&monthInputs.map（（数字，索引）=>
{number}
）}
)
}
}

---

如果看不到你在尝试什么，就很难想象你在努力实现什么。你能扔掉一些代码，即使它不工作吗？：）你尝试过什么方法，为什么不奏效？将月数保存到组件状态，然后将大小为月数的数组映射到文本字段中，这样做是可行的。