如何根据放置在输入字段中的数字显示一组 jsx 元素。反应答案

【问题标题】：How to display a set number of jsx elements depending on number placed in an input field. React如何根据放置在输入字段中的数字显示一组 jsx 元素。反应
【发布时间】：2021-03-16 18:16:16
【问题描述】：

我有一个接受数字的输入字段。（1 到 30 之间）我想根据该文本字段中放置的数字显示一个项目数组。如何使用 React hooks 做到这一点。对于这样的开始，我有一些基本的东西，但这甚至可能不是最好的开始方式。

export default function App() {
  const [state, setState] = React.useState({ value: "" });
  const [myArray, updateMyArray] = React.useState([]);

  const onSubmit = () => {
    updateMyArray((arr) => [...arr, `${state.value}`]);
  };
  const handleChange = (event) => {
    let { value, min, max } = event.target;
    value = Math.max(Number(min), Math.min(Number(max), Number(value)));
    setState({ value });
  };
  return (
    <>
      <input
        type="number"
        onChange={handleChange}
        value={state.value}
        min={""}
        max={100}
      />
      <button onClick={onSubmit}>Confirm</button>
      {state.value && (
        <>
          <div>
            {myArray?.map((e) => (
              <div>{e}</div>
            ))}
          </div>
        </>
      )}
    </>
  );
}

【问题讨论】：

那么如果用户在输入字段中输入20，你希望它显示20项？

标签： javascript arrays reactjs react-hooks

【解决方案1】：

你可以这样做

updateMyArray(new Array(state.value).fill(""));

这将创建一个长度为state.value 的新数组并将其分配给myArray

【讨论】：

【解决方案2】：

也许这个例子会对你有所帮助。

function App() {
  const [amount, setAmount] = useState(0);
  const [submittedAmount, setSubmittedAmount] = useState(0);

  // optionally
  const onSubmit = () => {
    setSubmittedAmount(amount);
  };

  const handleChange = (event) => {
    let { value, min, max } = event.target;

    value = Math.max(Number(min), Math.min(Number(max), Number(value)));
    setAmount(value);
  };

  return (
    <>
      <input
        type="number"
        onChange={handleChange}
        value={amount}
        min={0}
        max={100}/>
      <button onClick={onSubmit}>Confirm</button>
      
      { /* you can use amount instead of submitted amount if you want */
      {submittedAmount > 0 && Array.from({ length: submittedAmount }, (_, index) => <div key={index}>{index}</div> )}
    </>
  );
}

在我看来，如果您可以跳过提交并仅使用 amount 状态。多亏了这一点，您的 UI 将在输入值更改后自动更改而无需提交。

【讨论】：

【解决方案3】：

如果你知道 value 的值，你可以在渲染之前循环直到那个数字，比如：

  const items = [];
  for (let i; i < state.value; i++) {
        items.push(<div>{i}</div>);
  }

  return (
      <div>
        {items}
      </div> 
  )

【讨论】：