在 React 组件中生成输入

Question

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

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

Answer 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

Answer 2

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

generateInputs = (newRanNum) ...

这里……

{this.generateInputs()}

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

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