Блог

Я создаю приложение React, в котором пользователь выбирает, сколько билетов он хочет, а затем выбирает свои места из макета.

Я использую контекстный API, который работает для различных элементов, но я пытаюсь вернуть идентификатор мест, которые выбирает пользователь.

Это компонент с интерактивными элементами, из которых мне нужно получить идентификаторы —

 class ChooseSeats extends React.Component {
    render(){
        return(<Context.Consumer>
            {(context) => {
                return (
                    <div>
                        <p>Remaining tickets: {context.state.remainingSeats}</p>
                        <p>Chosen seat: {context.state.chosenSeat}</p>

                        <div>
                        <div id="A1" onClick={context.chooseSeats}>
                            <img src={freeSeat} alt="freeSeat"/>
                        </div>
                        <div id="A2" onClick={context.chooseSeats}>
                            <img src={freeSeat} alt="freeSeat"/>
                        </div>
                        <div id="A3" onClick={context.chooseSeats}>
                            <img src={freeSeat} alt="freeSeat"/>
                        </div>
                        </div>
                    </div>  
                
                )}
            }
        </Context.Consumer>
        )
    }
}
 

И это контекстный файл —

 export class Provider extends React.Component {
    state = {
        chosenSeat: " ",
        remainingSeats: 8
    }

    render() {
        const { remainingSeats, chosenSeat } = this.state
        
        return(
            <Context.Provider value={{
                state: this.state,
                chooseSeats: (event) => {
                    this.setState({
                        chosenSeat: event.target.id,
                        remainingSeats: remainingSeats - 1
                    })
                    console.log(chosenSeat)
                },
            }}>
                {this.props.children}
            </Context.Provider>
        )
    }
}
 

В моем реальном приложении remainingSeats значение изначально берется из некоторых выпадающих меню, в которых пользователь выбирает свои билеты, но для простоты я просто присвоил ему значение по умолчанию 8 в данном случае.

choseSeats Функция запущена, потому remainingSeats что значение уменьшается на 1 при каждом нажатии на место, но оно не возвращает идентификатор chosenSeat . Я пробовал chosenSeat использовать как строку, так и массив, но ни один из них ничего не возвращает.

Кто-нибудь может сказать мне, где я ошибаюсь?

Это потому, что это event.target.id пустое string место. Хотя вы прикрепили элемент onClick к div (который должен быть a button , чтобы сделать его доступным), если вы нажмете на дочерний img элемент, event.target он будет img .

Вы можете использовать event.currentTarget — это относится к элементу, к которому был прикреплен обработчик событий ( div ) — или вместо этого вы можете создавать встроенные функции и передавать идентификаторы.

Итак, вместо того, чтобы

 <div id="A3" onClick={context.chooseSeats}><img ...
 

вы можете использовать

 <button onClick={() => context.chooseSeats('A3')}><img ...
 

И обновите свой chooseSeats , который теперь получает идентификатор, а не event :

 chooseSeats: (id) => {
  this.setState({
    chosenSeat: id,
    remainingSeats: remainingSeats - 1,
  })
  console.log(chosenSeat)
},