React JS - Benutzerinformationen zum ausgewählten Wert aktualisieren

Question

Ich habe eine Komponente, die ziemlich viel tut - möglicherweise nicht die beste Praxis, aber das ist meine erste Reaktion App, also sobald ich alles arbeiten werde ich wahrscheinlich wieder gehen Umgestalten von Bits und Stücken.

Ich habe einen Konstruktor einrichten Zustand.

Ich habe eine KomponenteDidMount, die JSON von einer API abruft.

Ich habe eine Render-Funktion, die einige Variablen erstellt und produziert JSX-Code, dies gibt eine Tabelle mit Client-Daten aus der JSON API und enthält ein Auswahlmenü mit Optionen aus der API geladen.

Ich habe einen Event-Handler, der OnChange ausführt, wenn der Benutzer den Auswahlwert ändert.

Was passiert derzeit wenn der Auswahlwert geändert wird (zum Beispiel) Team 1, dann ändern sich alle Auswahlmöglichkeiten zu "Team 1" statt nur 1 Datensatz.

Was ich versuche zu tun ist nur die 1 Datensatz aktualisieren, aber dann auch in der Lage sein, die User.ID zusammen mit dem neuen Wert (für die 1 Datensatz) zurückgeben, so dass ich dann die API aktualisieren kann (I wissen, wie man die Daten zurückschickt, es bekommt nur die richtigen Werte zu posten).

Mein Code unten:

import React from 'react'; 

class GetUnassignedUsers extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      data:{unassignedUsers:[],teams:[]}, 
      selectValue: '8' 
     }; 
    } 
    componentDidMount() { 
     fetch("http://localhost/dashboard/?action=unassignedUsers.getUnassingedUsers", { 
      credentials: 'same-origin' 
     }) 
     .then(response => response.json()) 
     .then((json) => { 
      this.setState({ 
       data: json 
      }); 
     }); 
    } 
    handleChange (event) { 
     alert(this.state); 
     this.setState({ 
      selectValue: event.target.value 
     }); 
    } 
    render() { 
     let unassignedUsers = this.state.data.unassignedUsers; 
     let teams = this.state.data.teams; 
     let availableTeams = teams.map(function (team) { 
      return (
       <option value={team.id}>{team.team_name}</option> 
      ) 
     }); 
     let select = (
      <select value={this.state.selectValue} onChange={this.handleChange.bind(this)}> 
       {availableTeams} 
      </select> 
     ); 
     let rows = unassignedUsers.map(function (user) { 
      return (
       <tr> 
        <td>{user.ID}</td> 
        <td>{user.dateCreated}</td> 
        <td>{user.company}</td> 
        <td>{user.email}</td> 
        <td>{user.contactName}</td> 
        <td>{user.quoteDomain}</td> 
        <td>{user.InvoicePostCode}</td> 
        <td> 
         {select} 
        </td> 
       </tr> 
      ) 
     }); 
     return (
      <tbody> 
       {rows} 
      </tbody> 
     ); 
    } 
} 

export default GetUnassignedUsers; 

Answer 1

Wenn Sie die select für alle Zeilen erstellen, dann müssen u sie für alle Zeilen einzeln erstellen, und ein separates state Variable ist erforderlich, die zum Speichern Wert geändert, versuche es, es wird funktionieren.

prüfen jsfiddle für das Arbeitsbeispiel: https://jsfiddle.net/hmm47qLg/

selectValue wird ein Array, speichert jeder Wert der state jedes select -

constructor() { 
    super(); 
    this.state = { 
     data:{unassignedUsers:[],teams:[]}, 
     selectValue: [] 
    }; 
} 

verwenden render Verfahren ist es select für jede Zeile schaffen -

render() { 
    let unassignedUsers = this.state.data.unassignedUsers; 
    let teams = this.state.data.teams; 
    let availableTeams = teams.map((team,i)=> { 
     return (
      <option key={i} value={team.id}>{team.team_name}</option> 
     ) 
    }); 
    //let select = (
    // <select value={this.state.selectValue} onChange={this.handleChange.bind(this)}> 
    //  {availableTeams} 
    // </select> 
    //); 
    let rows = unassignedUsers.map((user, i)=> { 
     return (
      <tr key={i}> 
       <td>{user.ID}</td> 
       <td>{user.dateCreated}</td> 
       <td>{user.company}</td> 
       <td>{user.email}</td> 
       <td>{user.contactName}</td> 
       <td>{user.quoteDomain}</td> 
       <td>{user.InvoicePostCode}</td> 
       <td> 
        <select value={this.state.selectValue[i]} onChange={this.handleChange.bind(this, user, i)}> 
         {availableTeams} 
        </select> 
       </td> 
      </tr> 
     ) 
    }); 
    return (
     <table> 
      <tbody> 
       {rows} 
      </tbody> 
     </table> 
    ); 
} 

Innerhalb onChange Methode übergeben den Benutzer object und die index des row-

handleChange(user, index, e){ 
    console.log('user', user, e.target.value); 
    let selectValue = this.state.selectValue; 
    selectValue[index] = e.target.value; 
    this.setState({selectValue}); 
} 

In onChange Methode u die komplette user Objekt haben, wenn Sie die Daten an den Server senden möchten, u hier die api Anruf schreiben kann.