Question

我正在通过从js / jquery迁移我的项目来学习React。

在我的项目中，我有一个函数可以在按钮点击时复制div块（带有更改的ID和数据）。

所以例如我有一个div重新制作反应和一个按钮，应该在点击时添加一个新的div：

render() {
    return (
        <div className="expense-block" id="expense-block-0" data-block="0">  </div>
        <button
             type="button"
             className="btn btn-primary custom-add-button add-row"
             onClick={this.addRow}><i className="fas fa-plus"></i>
        </button>
    )
}

当我点击按钮时，它应该使用新的ID复制div。结果应该是：

render() {
        return (
            <div className="expense-block" id="expense-block-0" data-block="0">  </div>
            <div className="expense-block" id="expense-block-1" data-block="1">  </div>
            <button
                 type="button"
                 className="btn btn-primary custom-add-button add-row"
                 onClick={this.addRow}><i className="fas fa-plus"></i>
            </button>
        )
    }

如何在不使用0 js / jquery的情况下在React中实现此目的？这甚至可能吗？

Answer 1

你应该有一个包含所有id和数据的数组，然后通过array.map（）渲染'' 然后，addRow将只在数组中添加一个元素

Answer 2

您可以渲染数组

componentWillMount(){
    this.state={ numOfRows: [1]}
}
addRow() {
 this.setState({numOfRows: this.state.numOfRows.concat([2])})
}

然后在渲染功能

中

render() {
     return (
        { this.state.numOfRows.map(e=> (<div className="expense-block" id={"expense-block-" + e} data-block={3}>  </div>))
        }
        <button
             type="button"
             className="btn btn-primary custom-add-button add-row"
             onClick={this.addRow}><i className="fas fa-plus"></i>
        </button>
    )
}

Answer 3

You need to have a state in your react component for adding divs

class AddNewRow extends Component{
  constructor(props){
    super(props);
    this.state = {
       customDiv: ['div1']     // set initial state with one div
    }
  }

  addNewRow(){
    let cDivs = this.state.customDiv;
    cDivs.push('newDiv')
    this.setState({customDiv: cDivs })
  }

  render(){
    return(
      <div>
        // iterate the customDiv array 
        this.state.customDiv.map((cdiv, i) => {
          <div className="expense-block" key={cdiv} id="expense-block-`${i}`" data-block={i}>></div>
        })
        <button onClick={() => this.addNewRow}>Add Row</button>
      </div>
    )
  }
}

Answer 4

上面的答案只是一小部分。不要改变国家！从this.state.customDiv

创建一个新数组

addNewRow(){
    let cDivs = [...this.state.customDiv];
    cDivs.push('newDiv')
    this.setState({customDiv: cDivs })
  }

单击时复制渲染的div

4 个答案: