Set-Status nur für Self-Daten in Karte auf reactjs

Question

Ich habe das Array von Objekten eines Objekts und ich verwende Karte, um sie anzuzeigen, jeder Benutzer haben eine Option Schaltflächen, die Optionen 'Bearbeiten' und 'Entfernen' jeder Option haben eine onlclick Funktion, die einen Zustand zu zeigen, eine andere Ansicht so der Codesatz erklären 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: Here

die Frage ist, wie können Sie sehen, ist, wenn ich auf die Schaltfläche klicken Sie den Zustand setzen für Bearbeiten oder Entfernen Option, dies wird die Ansicht für alle Elemente, zeigen und sollte nur die Ansicht, die angeklickt wird, ich kenne den Status chan ge zu wahr und ist für alle Items gleich, aber ich weiß nicht, wie man den Zustand nur für einen Eintrag festlegt.

Vielen Dank im Voraus.

Answer 1

Ihr Problem ist, dass der Edit/Remove-Status singular und für die gesamte Liste ist. Jedes Element in der Liste erhält den gleichen Zustand hier:

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

Das einzige edit Variable vom Staat auf jedes Listenelement angewandt wird. Wenn Sie den Bearbeitungsstatus für jedes Element einzeln festlegen möchten, muss es mit diesem Element verfolgt werden.

EX:

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

Auf diese Weise jedes einzelne Element wird in der Lage sein zu sagen, in welchem ​​Zustand sie in individuell sind. Benutzer1 Artikel wird einen Bearbeitungsmodus haben, der unabhängig von den anderen Benutzern ist.

Dann können Sie so etwas wie dieses machen:

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