Как нажимать реквизиты на новую страницу при нажатии кнопки?

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 ответ. Спасибо заранее

EDIT

Если данные строки таблицы быть структурировано, как так и ссылки на объект на основе кода, как следующий? Если да, то как я могу найти этот конкретный объект на основе местоположения ячейки (с учетом дня, имени и номера класса)?

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, так что никто не будет в состоянии указать на одном конкретном месте вашего кода и сказать вам, что именно делать по-другому.

что сказал один типичный способ сделать это, чтобы использовать регулярные ссылки (или реагировать-маршрутизатор Links) внутри таблицы вместо пуговиц, где каждое звено включает в себя id параметр:

/newpage/<id>

. Затем вы объявляете маршрут реактивного маршрутизатора, который сопоставляет маршрут с компонентом:

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

. Когда пользователь посещает, например, /newpage/123 в вашем приложении, тогда будет отображаться компонент NewPage. Реагировать-маршрутизатор впрыснуть params опору, которая выглядит как:

{classInfoId: 123}

. Затем вы выбираете из своего Redux-хранилища объект информации класса с идентификатором 123 и показываете его по своему усмотрению.

Answer 2

Если я правильно понимаю ваш вопрос ... Я бы предложил вам изучить действие «push», которое является частью реакции-маршрутизатора-редукта.

ссылка: 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

Используйте редукторы и действия для уменьшения.

В случае события click уменьшите свое состояние, чтобы сохранить идентификатор или 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> 

Создать действие для setCurrentCell, чтобы сохранить текущий идентификатор ячейки, и впрыснуть, что с mapStatesToProps в новую таблицу.