Перенаправление на другую страницу в зависимости от списка данных (Reactjs) - PullRequest
Новая
       10

Перенаправление на другую страницу в зависимости от списка данных (Reactjs)

0 голосов
/ 29 сентября 2018

Я хочу сделать ссылку на другую страницу, когда выбрана одна из них.`

                {

                    this.state.datas.map((data,i)=>(

                        <option key={i} value={data.display_name}><Link to={"/search?q="+encodeURI  (data.name)} onClick={(e)=>this.clearData(data.name)}></Link></option>

                    ))
                }

                </datalist>`

1 Ответ

0 голосов
/ 29 сентября 2018

Я пробовал несколько вариантов, в том числе вложенность , опция внутри Ссылка и наоборот, но чистые html-выпадающие списки плохо работают с React Router.

Вот простое исправление: 

this.state.datas.map((data,i) =>
<option 
  key={i} 
  value={data.display_name}
  onClick={(e) => {this.clearData(data.name); this.props.history.push("/search?q=" + encodeURI(data.name)) }}
>
{data.name} // Perhaps you were missing the stuff between the <option> tags too?
</option>)

Если вы правильно подключили свой компонент к маршрутизатору, у вас будет объект history в компонентах компонента и вы сможетевызовите history.push , который перенаправит пользователя на вновь указанный маршрут.

Это создает прослушиватель событий для каждого параметра раскрывающегося списка, поэтому, если у вас много данных, несколько большеПодход с использованием перманента будет состоять в том, чтобы создать другой обработчик событий в вашем классе и присоединить его к слушателю onChange элемента select . 

onChange = (event, data) => {
    this.clearData(data.name); 
    this.props.history.push("/search?q=" + encodeURI(data.name));
}

Еще одна вещь, избегайте использования индекса i как ключ , поскольку это может привести к непредвиденным проблемам с рендерингом.Попробуйте найти значение, глобально уникальное для элемента, который вы отображаете.Например, data.data_id будет хорошим ключом , если вы случайно укажете его в своей базе данных.

Подробнее об опасностях индекса в качестве ключа

...