Question

所以我在React上弄脏了，我似乎无法弄清楚这个简单的问题（可能是因为睡眠不足）

当我点击“添加行”时，我想在render内添加元素（或div）。

我将如何继续呢？我是否需要将它保存在数组中并且在渲染函数中，我将不得不映射它？

class SimpleExample extends React.Component {
    constructor(props) {
        super(props)
        this.handleAddingDivs = this.handleAddingDivs.bind(this)
    }


    handleAddingDivs() {
        const uniqueID = Date.now()
        return (
            <div>
                This is added div! uniqueID: {uniqueID}
            </div>
        )
    }

    render() {
        return (
            <div>
                <h1>These are added divs </h1>

                <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>
            </div>
        )
    }
}

Answer 1

我们假设您要添加多个div，因此请为该数据，计数或任何其他数据维护状态变量（您也可以使用任何array并存储所有div的唯一值），然后使用map或任何其他循环为其创建div。

检查此工作代码段：

＆＃13;

class SimpleExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count : 0}
        this.handleAddingDivs = this.handleAddingDivs.bind(this)
    }


    handleAddingDivs() {
        this.setState({count: this.state.count + 1})     
    }
    
    renderDivs(){
        let count = this.state.count, uiItems = [];
        while(count--)
           uiItems.push(
               <div>
                   This is added div! uniqueID: {count}
               </div> 
            )
        return uiItems;
    }

    render() {
        return (
            <div>
                <h1>These are added divs </h1>
                <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>
                {this.renderDivs()}
            </div>
        )
    }
}

ReactDOM.render(<SimpleExample/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id ='app'/>

＆＃13;

Answer 2

尝试以下代码。只要您单击该按钮，就会生成一个唯一ID并将其存储在state.uids中。在render()中，添加的div根据state.uids呈现。

＆＃13;

class SimpleExample extends React.Component {
    constructor(props) {
        super(props)
        this.handleAddingDivs = this.handleAddingDivs.bind(this)
        this.state = {uids:[]}
    }


    handleAddingDivs() {
        let curr = this.state.uids;
        const uniqueID = Date.now()
        this.setState({uids:[...curr, uniqueID]});
    }

    render() {
        return (
            <div>
                <h1>These are added divs </h1>

                <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>
                { this.state.uids.map((uid, idx)=>
                  <div key={uid}>This is added div! uniqueID: {uid}</div>
                )}
            </div>
        )
    }
}

ReactDOM.render(<SimpleExample/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id ='app'/>

＆＃13;

Answer 3

是的，您需要在某处存储有关新div的数据......

这是flux / redux有时用于：你需要在Store中存储所需的所有数据，然后你知道要渲染的内容。

但是，如果你只使用React，那么使用状态！在你的情况下，你的州应该是这样的：

{
  addedDivs: [
    {uniqueId: 123},
    {uniqueId: 754},
  ]
}

然后在渲染中你将映射它（不要忘记添加key）

this.state.addedDivs.map((item) = > {return (<div key={item.uniqueId}></div>) })

和onClick你应该使用setState添加一些：

this.setState((prevState, props) => {
  var addedDivs = prevState.addedDivs;
  var uniqueId = Date.now();
  addedDivs.push({uniqueId: uniqueId});
  return {addedDivs: addedDivs}
});

Answer 4

您正在考虑DOM操作/ jQuery的术语。当您使用React时，您需要考虑数据以及它与DOM的关系。

在您的情况下，您需要：

每次点击“添加行”时，都会使用新行更新您的组件状态。按钮，在handleAddingDivs()方法
在render()方法

class SimpleExample extends React.Component {
  constructor(props) {
    super(props)
    this.handleAddingDivs = this.handleAddingDivs.bind(this)
   }

  //Modify state of component when 'Add Row' button is clicked
  handleAddingDivs() {
    const uniqueID = Date.now();
    this.setState({rows: this.state.rows.concat(uniqueId)});
  }

  //The `render()` function will be executed everytime state changes
  render() {
    return (
      <div>
        <h1>These are added divs </h1>
        //The rows are rendered based on the state
        {this.state.rows.map(function(uniqueId) {
          return ( 
            <div key={item.uniqueId}>This is added div! uniqueID: {uniqueID}</div>
          )
        }}
        <button className="btn-anchor-style add-row-link" type="button" onClick={this.handleAddingDivs}>{'Add Row'}</button>                  
      </div>
    )
  }
}

React.js - 即时添加div

4 个答案: