通过输入值进行动态渲染答案

【问题标题】：Dynamical render in react by input value通过输入值进行动态渲染
【发布时间】：2022-12-13 15:06:17
【问题描述】：

我找到了根据输入值呈现新字段的解决方案。如何用正确的方式去做？我创建了当用户使用 id="players" 输入要输入的值时必须返回元素的函数。例如，如果用户输入 5，则函数应在 id="playersList" 中呈现 5 个输入。

function PrimaryInputs() {
  const [playersQuantity, setPlayersQuantity] = useState(0);

  function handleChange(event) {
    setPlayersQuantity(event.target.value);
    }

  return (
          <>
           <div class="input_wrapper">
            {playersQuantity}
             <label htmlFor="players">How many players</label>
               <input
                 type="number"
                 name="players"
                 id="players"
                 onChange={handleChange}
               />
            <div id="playersList">
              {playersQuantity.map(() => (
                <div class="playersBlock">
                  <input
                    type="number"
                    placeholder="cups"
                    class="plCup"
                  />
                </div>
              ))}
            </div>
          </>
        );
      }

【问题讨论】：

标签： javascript reactjs mapping

【解决方案1】：

map 仅适用于数组 - 不适用于整数。有一些方法可以使用 fill 预填充数组，然后使用 map 预填充数组，但使用返回输入元素数组的 count 调用函数可能更容易。

const { useState } = React;

function Example() {

  const [ count, setCount ] = useState(0);

  // Parse the input value
  function handleChange(e) {
    setCount(Number(e.target.value));
  }

  // Simple loop from 0 to count pushing in
  // a new input with each iteration
  function addPlayers() {
    const players = [];
    for (let i = 0; i < count; i++) {
      players.push(<input type="text" key={`player${i}`} />);
    }
    return players;
  }

  return (
    <main>
      <section>
        <input
          type="number"
          min="0"
          onChange={handleChange}
        />
      </section>
      <section>
        {addPlayers(count)}
      </section>
    </main>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

【解决方案2】：

您只需要迭代playersQuantity 的数量并添加计数的元素。工作代码是：

import { useState, useEffect } from "react";

export default function PrimaryInputs() {
  const [playersQuantity, setPlayersQuantity] = useState(0);

  function handleChange(event) {
    setPlayersQuantity(event.target.value);
  }

  function iterator(quantity) {
    let elems = [];
    for (var i = 0; i < quantity; i++) {
      elems.push(
        <div class="playersBlock" key={i}>
          <input type="number" placeholder="cups" class="plCup" />
        </div>
      );
    }
    return elems;
  }
  return (
    <>
      <div class="input_wrapper">
        <label htmlFor="players">How many players? </label>
        <input
          type="number"
          name="players"
          id="players"
          onChange={handleChange}
        />
        <div id="playersList">{iterator(playersQuantity)}</div>
      </div>
    </>
  );
}

现场演示在这里：https://codesandbox.io/s/epic-star-828j8u?file=/src/App.js:0-865

【讨论】：