Question

我对React还是比较陌生的，如果这是一个非常简单/愚蠢的问题，请对不起。

因此，我正在制作一个应用程序，其中需要您提供多个月的时间，并取决于需要显示多少个文本字段的月数。例如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>
    )
  }
}

Answer 1

我尝试了您要实现的目标。

如果您有任何疑问，请告诉我。

https://codesandbox.io/s/tender-liskov-iicor?fontsize=14&hidenavigation=1&theme=dark

Answer 2

考虑将变量保存为状态。同样，您不应该在渲染函数中声明函数。这是代码：

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

And here is link to codesandbox

动态React文本输入

2 个答案: