@acorn

Как реализовать ссылки на пункты из списка, чтобы пункты открывались в отдельном div для редактирования CRUD React?

Привет! есть список из наименований мероприятий, планирую сделать ,чтобы при клике на наименование мероприятия отдельно открывалось в div и можно было его редактировать.
Как реализoвать в react такую ссылку?
Создать компонент "Мероприятие ", а в компоненте Search прописать его?
Как сделать это правильней?
Спасибо!

компонент Search
function searching(filterText){
    return function(x){
        return x.name.toLowerCase().includes(filterText.toLowerCase()) || !filterText;
    }
}

class Search extends Component{
     constructor() {
         super();
         this.addEvents = this.addEvents.bind(this);
         this.searchHandler = this.searchHandler.bind(this);
         //get initial state new Event, list...
         this.state = {
             newEvents: sampleEvents,
             listEvents: {},
             filterText: ''
         }

     }
  searchHandler(event) {
        this.setState({
            filterText: event.target.value
        });
    }
render(){
      const {newEvents,filterText }=this.state ;
return(
          <div className="events-block">
            <form>
              <input
                  type="text"
                  placeholder="Search..."
                  onChange={this.searchHandler}
                  value={filterText}
              />
            </form>
            <ListEvent addEvents={this.addEvents}  />
            <ul>Name{
                newEvents.filter(searching(filterText)).map(function(newEvents){
                    return (
                        <li>{newEvents.name}</li>
                    )
                })
            }
            </ul>
          </div>
      )
    }
  }
  • Вопрос задан
  • 30 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Cмотря как хотите реализовать. Если хотите открывать на той же странице, то достаточно хандлера, ключа состояния и условия в render:
class Example extends Component {
  state = {
     eventsList,
    selectedEvent,
  };

  handleSelectEvent(event) {
     this.setState({ selectedEvent: event });
  }
  
  render() {
    const { eventsList, selectedEvent } = this.state;
                
    return (
      <Wrapper>
        {selectedEvent && <EventDetails event={selectedEvent} />}
        <ul>
          {eventsList.map(event => (
            <li
              key={event.id}
              onClick={() => this.handleSelectEvent(event)}
            >
              {event.name}
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}


Если хотите на отдельной странице, то лучше использовать роутер.
В примере ниже используются компоненты BrowserRouter, Switch, Route, Link из пакета react-router-dom.
Приложение оборачиваете в BrowserRouter:
<BrowserRouter>
  <App />
</BrowserRouter>

В том месте где хотите рендерить роуты:
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/events" component={EventsList} />
  <Route path="/event/:id" component={EventDetails} />
</Switch>

В компоненте списка:
class EventsList extends Component {
  state = {
     eventsList,
  };

  render() {
    const { eventsList } = this.state;
                
    return (
      <Wrapper>
        <ul>
          {eventsList.map(event => (
            <li key={event.id}>
              <Link to={`/event/${event.id}`}>{event.name}</Link>
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}


В компоненте детализации, в зависимости откуда получаете элементы реализация может отличаться,
но id элемента можно получить из параметров ссылки так:
class EventsList extends Component {
  componentDidMount() {
    const elementId = this.props.match.params.id;
  }
  render() {
    ...
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Quasar Software Москва
от 120 000 до 170 000 руб.
TOCTEAM Казань
от 70 000 до 150 000 руб.
Spotware Systems Лимассол
от 3 500 до 3 800 eur.
15 авг. 2018, в 18:50
750 руб./в час
15 авг. 2018, в 18:48
45000 руб./за проект
15 авг. 2018, в 18:14
800 руб./за проект