时间戳

首页 > 解决方案 > 如何根据放置在输入字段中的数字显示一组 jsx 元素。反应

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

问题描述

我有一个接受数字的输入字段。（介于 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>
        </>
      )}
    </>
  );
}

标签： javascriptarraysreactjsreact-hooks

解决方案

你可以这样做

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

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

推荐阅读