Цикл создания инпутов?

Question

[smir11]

Здравствуйте, подскажите пожалуйста, можно ли через цикл создавать инпуты в реакте ? Количество инпутов будет вводится в другом инпуте и это число будет использоваться для цикла

Comments

[Froggyweb]

Можно. Зачем

Количество инпутов будет вводится в другом инпуте

можно просто +

[smir11]

+ неудобен тем , что придётся создавать их 10 раз, а в инпут можно написать число и нажать 1 раз кнопку

[Froggyweb]

При заполнении всех полей можно создавать следующую строку на всякий случай, не?

[smir11]

Froggyweb, так не пойдёт, потому что нужно в начале задать число инпутов , их может быть каждый раз разное количество

[Froggyweb]

можно создать любое количество как по значению, так и по событию проблема в чем?

[smir11]

Froggyweb, проблема в том , что не понимаю как создавать их через цикл (for к примеру ), понятно, что можно значения брать из инпута и передавать его в условие , но вот вызывать функцию создания инпута не выходит

[Froggyweb]

но вот вызывать функцию создания инпута не выходит

<input name="firstName" onChange={твоя функция} />

[smir11]

Froggyweb, я знаю как это сделать, но чтобы это в цикле работало ? Один раз только вызывает и все

Answer 1

[Артем]

import React, { useState } from 'react';

const MyComponent = () => {
  const [numOfInputs, setNumOfInputs] = useState(0);

  const handleNumOfInputsChange = (event) => {
    setNumOfInputs(event.target.value);
  };

  const inputArray = Array.from({ length: numOfInputs }, (_, index) => index + 1);

  return (
    <div>
      <input type="number" value={numOfInputs} onChange={handleNumOfInputsChange} />

      {inputArray.map((inputNum) => (
        <input key={inputNum} type="text" />
      ))}
    </div>
  );
};

export default MyComponent;

Comments

[smir11]

Пока не могу проверить, а можно сюда будет запилить кнопку и по нажатии будет соответственно отрисовываться инпуты ? и можете подсказать что означает _ в (_,index)

[smir11]

Работает, а как сделать ,чтобы в одной строке выводилось 2 инпута?

12
34
56

примерно так, спасибо

[smir11]

Работает, а как сделать ,чтобы в одной строке выводилось 2 инпута?

12
34
56

примерно так, спасибо

[smir11]

примерно так

[Артем]

inputArray разбивай на части на нужно количество и далее по аналогии

[smir11]

Артем, это я сделал, можете подсказать, как лучше , второе состояние делать для 2 массива , или оставить 2 массива на одном состоянии, просто во 2 массива будут потом приходить данные с сервера, а в 1 записываться вручную