Сделайте onClick на <li>go в другой вид

Question

Я новичок в реагировании, и я делаю проект, на самом деле это список дел, и мне нужно создать маршрутизатор, который, когда я нажимаю на свой элемент в

, отправляет мне информацию об этом элементе. , Вот мой фактический код. Это мое приложение. js

import React, { Component } from 'react';
import List from './List';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      items: []
    };
  }

  onChange = (event) => {
    this.setState({ term: event.target.value });
  }

  onSubmit = (event) => {
    event.preventDefault();
    this.setState({
      term: '',
      items: [...this.state.items, this.state.term]
    });
  }

  render() {
    return (
      <div style={{display: "flex", flexDirection: 'column', alignItems: "center", margin: 5}}>
        <form onSubmit={this.onSubmit}>
          <input style={{borderRadius: 3, borderColor: "black"}} 
          value={this.state.term} onChange={this.onChange} />
          <button style={{borderRadius: 3, borderColor: "black"}}>
            Adicionar</button>
        </form>
        <List items={this.state.items}/>
      </div>
    );
  }
}

А вот и мой список. js

import React from 'react';

const List = ({ items }) => (

  <ul style={{display: "block", listStyleType: "none", backgroundColor: "red"}}>
    {
      items && items.map((item, index) => <li key={index}>{item}</li>)
    }
  </ul>
  );

export default List;

Так что теперь я должен использовать библиотеку, чтобы составить маршрут, но сначала Мне нужно знать, как я делаю свои itens кликабельными, и когда я нажимаю, они возвращают что-то, что я могу перенаправить в детальный вид. Имеет смысл?

А есть библиотека, которую вы, ребята, рекомендуете делать эту работу?

Спасибо

Answer 1

Как мне кажется, вам нужно использовать пользовательские ссылки в реакции:

1) npm i react-router-dom

2) import {Link} from 'react-router-dom';

3) И, наконец, использовать <Link to="paste_your_url_here" />

Вы также можете разместить <Link to='' /> внутри ul, li.

Answer 2

Вы можете добавить onClick к каждому li, который перенаправляет на нужную вам ссылку (реализация может варьироваться в зависимости от библиотеки, которую вы выбрали для обработки рутирования), но это не очень хорошая идея, поскольку в HTML li не должны быть кликабельными.

То, что я хотел бы сделать, - это иметь ссылку (опять же, смотрите с библиотекой маршрутизации - обычно она обеспечивает компонент <Link />) внутри каждого <li>. Это обеспечивает лучшую семантию c для вашего кода.

Надеюсь, это имеет смысл.

Что касается хорошей библиотеки ... React-router или reach-router очень хороши!