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

Question

当我点击添加输入按钮时，我想在我的网页中添加新的输入标签。

尝试：

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>
  );
}

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

Answer 1

随心所欲的一种方式。

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>
);

你应该知道，添加inputs 是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>
);