在 React 组件中生成输入

Posted 2023-02-22

【中文标题】在 React 组件中生成输入

【英文标题】：Generating inputs in a React component

【发布时间】：2020-09-24 02:24:33

【问题描述】：

我正在尝试在单击按钮时生成输入，并且输入的数量是由随机数生成的。这是我到目前为止所拥有的，但它不起作用。我很困惑，觉得它应该工作。我不确定我错过了什么。任何帮助将不胜感激。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import  Image  from './Image.js'
import  Button  from './Button.js'
import  images  from './assets/images.js'
import  Countdown  from './Countdown.js'
import  DisplayCount  from './DisplayCount.js'
import  Inputs  from './Inputs.js'

class Game extends React.Component
  constructor(props)
    super(props)

    this.timer = null


    this.state = 
      currentImg: 0,
      timer: null,
      ranNum: null
    

    this.handleClick = this.handleClick.bind(this)
  

countdownClock = async (newRanNum) => 
const startingNum = newRanNum * 20;
for(let i = startingNum; i >= 0; i--) 
    await new Promise(resolve => 
        this.timer = setTimeout(() => 
         this.setState(
           timer: i
         )
        resolve()
     , 1000)
   );
  


generateInputs = (newRanNum) => 
    const inputs = []
    for(let i = 1; i <= newRanNum; i++)
      inputs.push(
        <Inputs type='text'   className='textInputs' />
      )
    
    return inputs;
  

  handleClick()
    clearTimeout(this.timer)
    let newRanNum = Math.floor(Math.random() * 20);
    this.countdownClock(newRanNum)
    this.generateInputs(newRanNum)
    let current = this.state.currentImg;
    let next = ++current % images.length;
    this.setState(
      currentImg: next,
      ranNum: newRanNum
    )
  

  render()
    let src = this.state.currentImg;
    return(
      <div>
        <Countdown name='Countdown: ' countdown=this.state.timer />
        <DisplayCount name='Word Count: ' count=this.state.ranNum />
        <Image src=images[src] />
        <Button onClick=this.handleClick />
        <div>
          <ul>
          this.generateInputs()
          </ul>
        </div>

      </div>
    )
  



ReactDOM.render(
  <Game />,
document.getElementById('root')
);

输入组件：

import React from 'react'

export const Inputs = (props) => 
    return (
      <li className=props.className>
        <input value=props.value  />
      </li>
    )

【参考方案1】：

第一件事是您的generateInputs() 函数接受一个参数，用于表示您想要将but you are not passing any parameter 渲染到this.generateInputs() 的输入数量

第二件事是你从这个函数返回一个数组，但没有在渲染函数中映射你的数组，所以这样做。

this.generateInputs(10) // pass parameter here


this.generateInputs(10).map((item, index)=>item)

在这个 Snack 中，我做了同样的事情，但是使用了 react-native

https://snack.expo.io/@waheed25/smiling-carrot

【参考方案2】：

我相信问题就在这里......

generateInputs = (newRanNum) ...

这里……

this.generateInputs()

您的输入渲染函数需要一个它没有得到的参数，并且由于它以undefined 的形式返回，因此循环永远不会运行。 :)

一般来说，最常见的是将状态（例如，输入的数量）从渲染中分离出来，并且只让渲染响应状态。也许您原本打算 generateInputs() 生成数组，而不是渲染它们（？）

【讨论】：

我相信该函数会呈现，因为您要返回数组。我认为@Waheed Akhtar 可能对此有误。

我附上了一个工作演示，请看一下，He is returning an array but not mapping that array，这是我已经完成的snack.expo.io/@waheed25/smiling-carrot

请注意，组件数组是 React 中渲染函数可接受的类型之一。 ``` export default (props) => const elements = [] for (let i = 0; i Element $1 h6>) return( elements ) ``` 和export default (props) => const elements = [] for (let i = 0; i < 5; i++) elements.push(<h6>`Element $1`</h6>) return( <div> elements.map((e)=>e </div> )

对不起，我猜它不会让我在 5 分钟后正确编辑......在 React 中，只要组件数组被封闭组件包围，它们就完全可以接受。我们经常看到组件在没有映射的情况下返回自己的children 数组。如果您在没有地图的情况下尝试自己的示例，您会发现它工作得很好。问题是他没有将参数传递给函数，导致循环没有被执行。

非常感谢，这很有教育意义。那是我没有将参数传递给函数。我认为它是通过我的handleClick 函数完成的。现在可以了。我非常感谢。