Question

我是新来的人，我想在这里做的是我有1个div：

onKeydown(event) {
    // here call every keypress 
    console.log(event);
    return event.keyCode !== 69;
}

每当有人单击plusIcon时，都应在其后再添加一个div，例如：

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

在jQuery中，我们可以简单地使用<div> <input /> <plusIcon></div> <div> <input /> <plusIcon></div>函数并追加，但是我不知道如何在react中做到这一点。

请让我知道是否有人知道这样做的方式。

Answer 1

一种解决方法是将变量保持在组件状态，并保持当前行数，而每次单击plusIcon都会使该数字递增。然后，您可以使用Array.from在render方法中创建那么多元素。

示例

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>

如何在点击时克隆和附加字段

1 个答案: