我正在構建一個 React 應用程序,用戶可以在其中選擇他們想要的門票數量,然后從布局中選擇他們的座位。我正在使用適用于各種元素的上下文 API,但我正在嘗試返回用戶選擇的座位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,但它不會返回 的 ID chosenSeat。我試過chosenSeat作為一個字符串和一個數組,但都沒有返回任何東西。誰能告訴我哪里出錯了?
Context API 不返回被點擊元素的 ID
慕雪6442864
2023-06-15 16:19:46