javascript 通过输入所需数字创建输入标记

nxagd54h 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(155)

我在页面上有一个带有“确定”按钮的输入，我想在我的输入中写入一个数字，然后按下该按钮，输入标签将根据我输入的数字量为我准备。例如，如果我在输入中输入数字4，然后单击“确定”按钮，将为我创建4个输入标签。
我怎样才能用react js写这段代码呢？
我尝试了以下代码，但它不工作...

import {useState} from "react";

const makeInputComponent = () => {
    const [numberOfProcess, setNumberOfProcess] = useState(null)

    const returnInput = ()=>{
        return  <input type="text" />
    }

    const makeInput = () => {
         for (let i = 0; i < Number(numberOfProcess); i++) {
            returnInput()
             console.log(i)
        }
    }
    return (
        <div>
            <label> enter your number </label>
            <input type="text" value={numberOfProcess} onChange={(event)=>setNumberOfProcess(event.target.value)}  />
            <button onClick={ makeInput } > ok </button>
        </div>
    )

}
export default makeInputComponent ;

JavaScript

来源：https://stackoverflow.com/questions/74930005/create-the-input-tag-by-entering-the-required-number

2条答案

按热度按时间

pcww981p1#

你可以试试这个代码。

const [numInputs, setNumInputs] = useState(0)

  const createInputs = () => {
    const inputArray = []
    for (let i = 0; i < numInputs; i++) {
      inputArray.push(<input type="text" key={i} />)
    }
    return inputArray
  }

  return (
      <div>
        <input
          type="number"
          value={numInputs}
          onChange={(e) => setNumInputs(+e.target.value)}
        />
        <button onClick={createInputs}>OK</button>
        {createInputs()}
      </div>
  )

赞(0）回复(0）举报 2022-12-28

m1m5dgzv2#

- 解决方案：**

下面是你可以做的，从输入中获取值，当按钮被按下时，输入值创建一个长度为该长度的数组，然后Map该数组以创建输入框。

export default function App() {
const[val,Setval]=useState("")
const[inputbox,Setinputbox]=useState([])

const handleClick=()=>{
const array=new Array(val*1).fill(0)
Setinputbox(array)
}

return (
<div className="App">
  <input type="number" value={val} onChange={e=>Setval(e.target.value)}/>
  <button onClick={handleClick}>Submit</button>
  <div>
    {inputbox.map((val,index)=>{
      return(
         <input key={index} type="text"/>
      )
    })}
  </div>
</div>
);
}

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 通过输入所需数字创建输入标记

2条答案

相关问题

热门标签

最新问答