Question

执行addRow（）函数的单击没有任何响应。我的代码有什么问题？

...
constructor(props) {
    super(props)
    this.state = {
      rowCount: 1
    }
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 })
  renderRow = () => (
    <div>
      <Input type="text" />
      <Button onClick={this.addRow}>+</Button>
    </div>
  )
  render() {
    const { type, value } = this.props
    const { rowCount } = this
    const i = 0
    let rows = this.renderRow()
    while (i < rowCount) {
      rows = this.renderRow()
    }
    return rows
  }
...

我知道一个使用lodash的时间的简单解决方法。在这里，我正在尝试使用vallina js来实现它。

Answer 1

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

render() {
   const { rowCount } = this.state;
   const renderRow = () => {
      return Array(rowCount).fill(1).map((row, i) => (
        <div key={i}>
          <Input type="text" />
          <Button onClick={this.addRow}>+</Button>
        </div>
      )
   }
   return renderRow();
}

此处的注意事项

Array(rowCount).fill(1).map((row, i) => {})将初始化rowCount索引的数组，例如5并用index的值填充每个1；

在this.setState(prevState => ({ rowCount: prevState.rowCount + 1 }));上要注意的另一件事是，我进入了rowCount的先前状态，并向其中添加了1以更新新状态。

Answer 2

更改了row为数组，以将每个新元素推入数组，并在循环中渲染和递增i值以进行递增。

 constructor(props) {
    super(props);
    this.state = {
      rowCount: 1
    };
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
  renderRow = () => (
    <div>
      <input type="text" />
      <button onClick={this.addRow}>+</button>
    </div>
  );
  render() {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    let i = 0;
    let rows = [];
    while (i < rowCount) {
      rows.push(this.renderRow());
      i++;
    }
    return <div>{rows}</div>;
  }

Answer 3

您一次又一次地替换同一行。您应该使用数组代替，例如

let i = 1;
let rows = [this.renderRow()];
while (i < rowCount) {
    rows.push(this.renderRow());
    i++;
}
return <div>rows</div>

，您需要使用i将计数器i++递增。

反应：动态行失败

3 个答案: