버튼 클릭시 소품을 새 페이지로 푸시하는 방법은 무엇입니까?

Question

현재 테이블이 있으며 각 셀에 버튼이 있습니다. 그 특정 날 (월요일 또는 화요일), 클래스 (클래스 1 또는 클래스 2), 이름 (Kev 또는 Josh)을 기반으로 버튼을 클릭하면 테이블의 해당 특정 버튼과 관련된 객체를 새로운 페이지? ReactJS + React Router + Redux를 사용하면이 문제에 대한 올바른 접근 방법은 무엇입니까?

새 페이지로 이동하면 새 페이지는 전달 된 개체의 클래스 정보로 표를 채우고 클릭 한 단추 셀과 관련됩니다.

코드 :

http://jsfiddle.net/k7wbzc4j/16/

<table className="test-table"> 
    <thead> 
    <tr> 
     <th>List</th> 
     <th colSpan="2">Monday</th> 
     <th colSpan="2">Tuesday</th> 
    </tr> 
    <tr> 
     <th>Names</th> 
     <th>Class 1</th><th>Class 2</th> 
     <th>Class 1</th><th>Class 2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Kev</td> 
     <td><button>abc</button></td><td><button>def</button></td> 
     <td><button>ghi</button></td><td><button>jkl</button></td> 
    </tr> 
    <tr> 
     <td>Josh</td> 
     <td><button>mno</button></td><td><button>pqr</button></td> 
     <td><button>stu</button></td><td><button>vwx</button></td> 
    </tr> 
    </tbody> 
</table> 

수락하고 upvote에 응답 할 것이다. 사전에 감사

편집

테이블 행 데이터가 너무하고 다음과 같은 ID를 기반으로 객체를 참조 같은 구조해야 하는가? 그렇다면 셀 위치 (날짜, 이름 및 클래스 번호를 고려하여)를 기반으로 해당 ID 개체를 어떻게 찾을 수 있습니까?

list: [ 
    { 
    name: Kev 
     monday: { 
     class1: { 
      id: 0, 
      classTitle: abc, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class 2: { 
      id: 1, 
      classTitle: def, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
     tuesday: { 
     class1: { 
      id: 2, 
      classTitle: ghi, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class 2: { 
      id: 3, 
      classTitle: jkl, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
    }, 

    { 
    name: Josh, 
     monday: { 
     class1: { 
      id: 4, 
      classTitle: mno, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class2: { 
      id: 5, 
      classTitle: pqr, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
     tuesday: { 
     class1: { 
      id: 6, 
      classTitle: stu, 
      number: class1, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     }, 
     class2: { 
      id: 7, 
      classTitle: vwx, 
      number: class2, 
      info: { 
      time: 1, 
      classSize: 2, 
      } 
     } 
     }, 
    } 
    } 
] 

Answer 1

당신의 JSFiddle는 반응 라우터를 사용하거나 반응-REDUX을 아무도 코드의 하나 개의 특정 장소를 가리 정확히 다르게 무엇을 말할 수 없습니다, 그래서하지 않습니다. 말했다

는이 작업을 수행하는 하나의 전형적인 방법은 각 링크는 id 매개 변수를 포함하는 대신 버튼의 테이블, 내부에 일반 링크를 사용 (또는 반응 라우터 Links)하는 것입니다

/newpage/<id>

. 다음 경로를 구성 요소로 매핑하는 반응 라우터 경로를 선언합니다.

<Route path="newpage" component={NewPage}> 
    <Route path=":classInfoId" component={NewPage} /> 
</Route> 

예를 들어 사용자가 앱에서 /newpage/123을 방문하면 NewPage 구성 요소가 렌더링됩니다. 반응 라우터처럼 보이는 params 소품 주입됩니다

{classInfoId: 123}

합니다. 그런 다음 ID가 123 인 클래스 정보 객체를 Redux 저장소에서 가져 와서 원하는대로 표시합니다.

Answer 2

질문을 올바르게 이해하고 있다면 ... 반응식 라우터의 일부인 '밀어 넣기'동작을 살펴 보시기 바랍니다.

링크 : https://github.com/reactjs/react-router-redux

는 '푸시'에 대한 검색을 수행하고 그들이 그것을 아래로 사용되는 전시 위치를 예를 들어 보면 :

store.dispatch (푸시 ('/ foo는'))

그들이하는 일은 사용자를 기존 페이지에서 다음 페이지 '/ foo'로 상태를 잃지 않고 안내하는 것입니다.

상태가 유지되므로 다음 페이지를 방문하면 Redux 상점을 들여다 볼 수 있으며 모든 상점 데이터는 그대로 남아 있어야합니다.

희망이 도움이됩니다.

Answer 3

다음 페이지로 리디렉션하기 전에 대상을 redux 상태 컨테이너에 저장하도록 디스패처를 만들어야합니다.

다음은 코드 스 니펫입니다.

<Button disabled={!this.state.selectedParent} onClick={this.goNextPage} /> 

goNextPage() { 
    const {dispatch} = this.props; 
    dispatch(saveSelectedOrganization({ 
     parentNode:this.state.selectedParent, 
     organizationData: this.props.list 
    })); 

    browserHistory.push('/admin/orgatnizations/create'); 
} 

Answer 4

redux reducers 및 동작을 사용하십시오.

클릭 이벤트가 발생하면 상태를 저장 ID 또는 classTitle로 줄이십시오. 나는 당신이 가지고있는 데이터로 테이블을 동적으로 렌더링하고 있다고 생각한다.

onClick = (id) =>() => { 
    this.props.setCurrentCell(id) // setCurrentCell is your action 
    this.props.push('/new-page') // push is react-router-redux action. These actions are mapped into props with mapDispatchToProps 
} 

// td rendering 
<td><button onClick={this.onClick(cell.id)}>{cell.classTitle}<td> 

현재 셀 ID를 저장하고 새 테이블에 mapStatesToProps와 함께 삽입하도록 setCurrentCell에 대한 동작을 만듭니다.