上下文 API 没有返回被点击元素的 ID

Question

我正在构建一个 React 应用程序，用户可以在其中选择他们想要的门票数量，然后从布局中选择他们的座位。

我正在使用适用于各种元素的上下文 API，但我正在尝试 return 用户选择的席位的 id .

这是具有可点击元素的组件，我需要从中获取 ID -

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 但它不会 return chosenSeat。我试过 chosenSeat 作为字符串和数组，但都没有 return 任何东西。

谁能告诉我哪里出错了？

Answer 1

因为 event.target.id 是一个空的 string。尽管您将 onClick 附加到 div 上（应该是 button 以使其可访问），但如果您单击子项 img，event.target是 img.

您可以使用 event.currentTarget - 它指的是事件处理程序已附加到的元素 (div) - 或者您可以改为创建内联函数并传递 ID。

所以，而不是

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

你可以使用

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

并更新您的 chooseSeats，它现在收到一个 ID，而不是 event:

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

上下文 API 没有返回被点击元素的 ID

Context API isn't returning the id of clicked element

javascript

reactjs

react-context