React JS - 更新用戶信息的選擇值更改

Question

我有一個組件做了很多 - 可能不是最好的做法，但這是我的第一反應的應用程序，所以一旦我有一切工作，我可能會回到重構點點滴滴。

我有一個構造函數設置狀態。

我有一個從API獲取JSON一個componentDidMount。

我有一個渲染功能，設置了一些變量，併產生一些JSX代碼，這將返回與JSON API使用採取客戶端數據的表格，包括從API加載選項的選擇菜單。

我有一個運行的onChange當用戶更改選擇值的事件處理程序。

當選擇值更改爲（例如）隊1目前發生什麼，然後所有的選擇更改爲「1隊」，而不是僅僅是1分的紀錄。

我所試圖做的剛剛更新1分的紀錄，但隨後也能夠與新的選擇值（1個記錄）返回User.ID這樣我就可以更新API（我知道如何發回數據，它只是得到正確的值發佈）。

我下面的代碼：

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

如果你想創建select所有行然後u需要單獨創建他們所有的行，和一個單獨的state變量是必需的存儲改變了價值，試試這個會起作用。

的工作示例檢查jsfiddle：https://jsfiddle.net/hmm47qLg/

selectValue將是一個數組，每個值將存儲每個select的state -

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

使用此render方法，它會爲每行創建select -

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

裏面onChange方法傳遞用戶object和行向

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

在onChange方法index u有完整user對象，如果你想將數據發送到服務器，U可以在這裏寫api電話。