React.jsは - オンザフライでのdivのを追加

Question

だから私が反応上の汚れた私の手を取得していますし、私は要素を追加したい

（おそらく睡眠不足の）この単純な問題を見つけ出すように見えることはできません"Add Row"をクリックすると、即座にrenderの内部の（またはdivs）

どうすればいいですか？私はそれを配列に保持する必要がありますか？レンダリング関数内で、マップする必要がありますか？

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要素の一意の値を格納することができます）したいとしましょうまたは他のループを使ってdivを作成します。

チェックこの作業スニペット：

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'))

<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'/>

Answer 2

は、以下のコードを試してみてください。ボタンをクリックすると、一意のIDが生成され、state.uidsに格納されます。 render()では、追加されたdivはstate.uidsに従ってレンダリングされます。

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'))

<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'/>

Answer 3

はい、あなたがどこかに新しいdiv要素に関するデータを格納する必要があります...

これは、フラックス/ Reduxのは、時にはために使用されるものである：あなたがレンダリングするために必要なすべてのデータを保存しますStoreで、次にレンダーするものを知っています。

しかし、あなたがReactのみを使用している場合は、状態を使用してください！ あなたの状態はあなたの場合には、次のようにする必要があります：

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

、その後であなたが

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

（keyを追加することを忘れないでください）、それをマップするとの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> 
    ) 
    } 
}