javascript - 如何在单击时克隆和附加字段

Question

我是新来的 react ，我在这里想做的是我有 1 个 div，如下所示:

<div> <input /> <plusIcon></div>

每当有人点击 plusIcon 时，它应该在其后添加一个 div，如下所示:

<div> <input /> <plusIcon></div>
<div> <input /> <plusIcon></div>

在 jQuery 中，我们可以简单地使用 clone() 函数并附加，但我不知道如何在 React 中执行此操作。

如果有人知道任何方法，请告诉我。

Answer 1

解决此问题的一种方法是在组件状态中保留一个变量，其中包含当前的行数，并且每次单击 plusIcon 都会增加该数字。然后您可以使用 Array.from在渲染方法中创建那么多元素。

示例

class App extends React.Component {
  state = {
    rows: 1
  };

  addRow = () => {
    this.setState(({ rows }) => ({ rows: rows + 1 }));
  };

  render() {
    return (
      <div>
        {Array.from({ length: this.state.rows }, (_, index) => (
          <div key={index}>
            <input />
            <button onClick={this.addRow}>+</button>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

<div id="root"></div>