时间戳

首页 > 解决方案 > React - 使用状态动态添加输入标签

reactjs - React - 使用状态动态添加输入标签

问题描述

当我单击添加输入按钮时，我想向我的网页添加新的输入标签。

试图：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [addInput, setAddInput] = useState(false);
  const handleClick = () => setAddInput(true);
  return (
    <div className="App">
      <button onClick={handleClick}>Add Input</button>
      {addInput ? <input type="text" /> : ""}
    </div>
  );
}

如何使上述代码能够动态添加新输入？

标签： reactjs

解决方案

一种做你想要的方法。

const [state, setState] = useState([]);

const handleClick = () => {
    let inputs = Object.assign([], state);
    inputs.push(<input type='text' key={inputs.length} />);

    setState(inputs);
}

return (
    <div className="App">
        <button onClick={handleClick}>Add Input</button>
        {state}
    </div>
);

你应该知道， addedinput是Uncontrolled Components。

为了帮助您更多地了解可能的解决方案，这里有另一种方法：

const [state, setState] = useState(0);

const handleClick = () => setState(state + 1);

const generateInputs = () => {
    const inputs = [];

    for (let i = 0; i < state; i++) inputs.push(<input key={i} type='text' />);

    return inputs;
}

return (
    <div className="App">
        <button onClick={handleClick}>Add Input</button>
        {generateInputs()}
    </div>
);

推荐阅读