React - 탭의 클릭에 대한 값

나는 액시스를 사용하는 앱을 가지고 있는데, 이는 탭에 맵을 사용하여 값 (예 : ID 및 warehouseName)을 렌더링합니다. 지금 내가하고 싶은 것은 warehouseID에있는 상태를 loadBrandTotal()에 게시하고지도에 표시되는 값 ID입니다.React - 탭의 클릭에 대한 값

지금까지 내 코드는 다음과

export default React.createClass({ 
 

 
    getInitialState(){ 
 
     return { 
 
      warehouseName: "" 
 
     } 
 
    }, 
 

 
    componentWillMount(){ 
 
     this.loadWarehouse(); 
 
     this.loadBrandTotal(); 
 
    }, 
 

 

 
    loadWarehouse(){ 
 
     var that = this 
 
     var url = api + 'retrieveWarehouseList'; 
 
     axios.post(url, 
 
      { 
 
       warehouseName : 'NONE' 
 
      }) 
 
     .then(function (response) { 
 
      console.log(response.data); 
 
      that.setState({ 
 
       warehouseList : response.data.retrieveWarehouseListResult 
 
      }); 
 
      }) 
 
     .catch(function (response) { 
 
      console.log(response); 
 
     }); 
 
    }, 
 

 
    loadBrandTotal(){ 
 
     var that = this 
 
     var url = api + 'retrieveTotalSalesPerBrand'; 
 
     axios.post(url, 
 
      { 
 
       warehouseID : "None" 
 
      }) 
 
     .then(function (response) { 
 
      console.log(response.data); 
 
      that.setState({ 
 
       totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult 
 
      }); 
 
      }) 
 
     .catch(function (response) { 
 
      console.log(response); 
 
     }); 
 
    }, 
 

 
    render() { 
 
    var wareName = this.state.warehouseList; 
 
    return (
 
    \t <ul className="tabs tabs-transparent"> 
 
\t   {wareName.map(function(nameoObjects) { 
 
\t   return (
 
\t    <li className="tab"> 
 
\t     <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a> 
 
\t    </li> 
 
\t   ) 
 
\t   })} 
 
\t  </ul> 
 
    \t)} 
 

 
})

감사처럼 사전에 많이 있습니다.

출처

2017-01-10 kcNeko

나는 당신이하고 싶은 것을 100 % 확신하지는 않지만, loadBrandTotal() 함수 안에서 loadWarehouse() 함수에서 얻은 데이터를 게시하고 싶습니다. 그렇다면 언제쯤이 게시 작업을 원하십니까? 버튼을 클릭 하시겠습니까?

// Give the id as an argument to loadBrandTotal 
loadBrandTotal(id){ 
     var that = this 
     var url = api + 'retrieveTotalSalesPerBrand'; 
     axios.post(url, 
      { 
       // Post the ID 
       warehouseID : id 
      }) 
     .then(function (response) { 
      console.log(response.data); 
      that.setState({ 
       totsalesperbrand : response.data.retrieveTotalSalesPerBrandResult 
      }); 
      }) 
     .catch(function (response) { 
      console.log(response); 
     }); 
    }, 

    render() { 
    var wareName = this.state.warehouseList; 
    return (
     <ul className="tabs tabs-transparent"> 
      {wareName.map(function(nameoObjects) { 
       return (
       <li className="tab"> 
        <a href="#test1" value={nameoObjects.ID} key={nameoObjects.ID}>{nameoObjects.warehouseName}</a> 
        // When clicked, this button sends THIS list object's nameoObject ID to the loadBrandTotal function, where it's posted 
        <button onClick{() => this.loadBrandTotal(nameoObjects.ID)}>Post ID</button> 
       </li> 
      ) 
      })} 
     </ul> 
    )}

여기서 각리스트 요소는 요소가 (변경 코드 주석 참조) 등록한 년대 loadBrandTotal() 함수에지도 fucntion에받은 ID 값을 전송하는 버튼을 갖는 경우의 예이다

그래서이 예제에서지도 함수에 렌더링 된 모든 목록 요소에는 click되었을 때 자신의 nameoObject ID가 게시되고 loadBrandTotal 함수에 상태를 설정하는 버튼이 포함됩니다. 그게 너가하려는 일이야?

출처

2017-01-10 04:37:04 Jayce444

React - 탭의 클릭에 대한 값

답변

관련 문제