自己データのみの状態をreactjsのマップに設定する

Question

私はオブジェクトの配列を持っており、マップを使用して表示しています。各ユーザーには、それぞれのオプションに「編集」と「削除」オプションボタンがあります問題は、あなたが見ることができます私は状態を設定するボタンをクリックしたときに、ある方法ですHere

：コードはitselft

class App extends React.Component { 
    state = { 
     edit: false, 
     remove: false 
    } 

    handleEdit =() => { 
     this.setState({ edit: true }) 
    } 

    handleRemove =() => { 
     this.setState({ remove: true }) 
    } 

    cancelEdit =() => { 
     this.setState({ edit: false }) 
    } 

    cancelRemove =() => { 
     this.setState({ remove: false }) 
    } 

    renderEditItem =() => { 
     const { 
      state: { 
       edit, 
       remove 
      }, 
      cancelEdit, 
      cancelRemove, 
      handleEdit, 
      handleRemove 
     } = this 

     if (edit) { 
      return (
       <div> 
        <span>Edit view</span> 
        <br/> 
        <button onClick={cancelEdit}>Cancel</button> 
       </div> 
      ) 
     } 

     if (remove) { 
      return (
       <div> 
        <span>Remove view</span> 
        <br/> 
        <button onClick={cancelRemove}>Cancel</button>     
       </div> 
      ) 
     } 

     return (
      <div> 
       <button onClick={handleEdit}>Edit</button> 
       <br/> 
       <button onClick={handleRemove}>Remove</button> 
      </div> 
     ) 
    } 


    renderUsers =() => { 
     const { 
      renderEditItem 
     } = this 

     const users = [ 
      { 
       id: 1, 
       name: 'User1' 
      }, 
      { 
       id: 2, 
       name: 'User-2' 
      }, 
      { 
       id: 3, 
       name: 'User-3' 
      } 
     ] 

     return users.map((user) => { 
      return (
       <ul key={user.id}> 
        <li> 
         <div> 
          <span ref='span'>{user.name}</span> 
          <br/> 
          {renderEditItem()} 
         </div> 
        </li> 
       </ul> 
      ) 
     }) 
    } 

    render() { 
     return (
      <div> 
       {this.renderUsers()} 
      </div> 
     ) 
    } 
} 

React.render(
    <App />, 
    document.getElementById('app') 
); 

JSfiddleを説明するように、別のビューを表示するように状態を設定onlclick機能編集または削除オプションを選択すると、これはすべてのアイテムの表示を に表示し、クリックされたビューのみにする必要があります。私は状態を知っていますgeをtrueにして、すべてのアイテムについて同じですが、どのエントリーに対してどのように状態を設定するのかわかりません。

ありがとうございます。

Answer 1

あなたの問題は、編集/削除状態が単数であり、リスト全体の問題であるということです。

if (edit) { 
    return (
     <div> 
      <span>Edit view</span> 
      <br/> 
      <button onClick={cancelEdit}>Cancel</button> 
     </div> 
    ) 
} 

状態から単一edit変数が各リストのアイテムに適用されます。リスト内の各項目は、ここでは同じ状態を受信します。各アイテムの編集状態を個別に設定したい場合は、そのアイテムと一緒に追跡する必要があります。

EX：

const users = [ 
    { 
     id: 1, 
     name: 'User1', 
     edit: true 
    }] 

この方法で、個々の項目は、それが個別にあるものの状態伝えることができるようになります。 User1アイテムには、他のユーザーとは独立した編集モードがあります。あなたに返すようにしたいものは何でもコンポーネントに変換

return users.map((user) => { 
    return (
     <ul key={user.id}> 
      <li> 
       <div> 
        <span ref='span'>{user.name}</span> 
        <br/> 
        {user.edit ? 'EDIT MODE' : 'NOT EDIT MODE'} 
       </div> 
      </li> 
     </ul> 
    ) 
})