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

당신이 다음 U는 모든 행에 대해 별도로 만들 필요가 모든 행에 대한 select을 만들려면 별도의 state 변수가를 저장하는 데 필요한 (오류를 변명, 그것을 테스트하지 않은 경우) 변경된 값은 작동합니다. 작업 예를 들어

확인 jsfiddle : -

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

사용이 render 방법은 각 행에 대해 select를 생성합니다 https://jsfiddle.net/hmm47qLg/

selectValue가 배열 될 것입니다, 각각의 값은 각 select의 state 저장됩니다 -

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 방법 내부 u는 여기 api 전화를 쓸 수, u는 전체 user 개체가 사용자 object 및 onChange 방법에서 로우 -

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

의 index를 전달합니다.