Как получить массив значений у `input type = “number”` в JS, React?

Question

Допустим, есть input type = "number" Пользователь ввел туда число "3". Так вот, как мне сгенерировать кол-во елементов input в зависимости от введенного числа? Тоесть надо что бы ниже появилось 3 инпута, соотвецтвенно если число уменьшается или увеличивается то и кол-во инпутов тоже уменьшается или увеличивается...

Answer 1

const { useState } = React;

function MainPage() {
    let [num, setNum] = useState(0);

    return(<div className="column">
    <input type="number" onChange={e => setNum(Number(e.target.value))}/>
    {Array.from({length: num},(_ ,i) => <input key={i} type="text"/>)}
    </div>)
}

ReactDOM.render(<MainPage/>, document.getElementById('app'));

.column {
  display: flex;
  flex-direction: column;
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Я добавил valueCounter: Number(event.target.value), потому что value это строка, а вам надо получить число.

Ну и раскомментил ваш код, чуть изменил.

{[...Array(this.state.valueCounter)].map((item, key) => (
    <input key={key} placeholder={key + 1}/>
))}

Это ваш код:

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      valueCounter: 0
    };
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  handleChangeCounter = event => {
    this.setState({ valueCounter: Number(event.target.value) });
  };

  render() {
    return (
      <div>
        <input
          type="number"
          min="0"
          max="5"
          value={this.state.valueCounter}
          onChange={this.handleChangeCounter}
        />
        {[...Array(this.state.valueCounter)].map((item, key) => (
            <input key={key} placeholder={key + 1}/>
         ))} 
        <form>
          <p>{this.state.valueCounter}</p>
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);


function App() {
  return (
    <div className="App">
      <Input />
    </div>
  );
}

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"></div>

БЛОГ НА HUSL

Как получить массив значений у `input type = “number”` в JS, React?

Ответы (1 шт):