无法从其他组件访问该函数

Question

我在这里玩井字游戏。我不知道我的代码有什么问题，我无法从其他组件访问函数。

import React from "react";
import '../App.css';
class Choosechar extends React.Component {
constructor() {
super();
this.state = {};
this.onRadioSubmmit = this.onRadioSubmmit.bind(this);
}
onRadioSubmmit() {
this.props.charSelect(this.state)
}
render() {
var showMenu = (this.props.menuVisible) ? 'show' : 'hide';
return (
<div className="App-main-content">   
<div className={showMenu}>
<div className="">
<div className="center">
<h1>Do you want to play as <b>X</b> or <b>O</b>?</h1>
<button id="x-char" className="xo-button x" onClick={this.onRadioSubmmit}>X</button>                    
<button id="o-char" className="xo-button o" onClick={this.onRadioSubmmit}>O</button>
</div>
</div>
</div>       
</div>
)
}
}
export default Choosechar;

在上面的代码中，我试图显示用户想要播放的角色，无论用户是否可以选择'X'或'O'

Game.js
import React from "react";
import WinLine from './Gameboard/WinLine';
import Board from './Gameboard/Board';
import Choosechar from './Choosechar';
import '../App.css'
const winCombos = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],   //horizontal
[0, 3, 6], [1, 4, 7], [2, 5, 8],   //vertical
[0, 4, 8], [6, 4, 2]               //diagonal
];
class Game extends React.Component {    
constructor(props) {
super(props);
this.state = {
gameBoard:   Array.from(Array(9).keys()),
menuVisible: true,
showLine:    false,
turn:        'X',
turnToggler: 'X',
user:        '',
ai:          '',
result:      '',
winLine:     ''
}
this.minMax        = this.minMax.bind(this);
this.gameOver      = this.gameOver.bind(this);
this.checkWin      = this.checkWin.bind(this);
this.checkTie      = this.checkTie.bind(this);
this.bestSpot      = this.bestSpot.bind(this);
this.startGame     = this.startGame.bind(this);
this.charSelect    = this.charSelect.bind(this);
this.changeTurn    = this.changeTurn.bind(this);
this.handleClick   = this.handleClick.bind(this);
this.emptySquares  = this.emptySquares.bind(this);
this.playSound     = this.playSound.bind(this);
}
startGame() {
//initialize start state
this.setState({
gameBoard:   Array.from(Array(9).keys()),
menuVisible: true,
showLine:    false,
turn:        'X',
turnToggler: 'X',
user:        '',
ai:          '',
result:      '',
winLine:     '',
});
//clear the board spaces of any text/styling
let cells = document.querySelectorAll('.cell');
for (let i = 0; i < cells.length; i++) {
cells[i].innerText = '';
cells[i].style.backgroundColor = 'initial';
cells[i].style.pointerEvents = 'initial';
}
}

charSelect(e) {    
//assign selection to user, assign ai not selected
debugger;
let userCharacter = e.currentTarget.innerHTML;
let aiCharacter = (userCharacter === 'X') ? 'O' : 'X';
//update game state
this.setState((prevState, props) => {
return {
user: userCharacter,
ai: aiCharacter,
menuVisible: false
}
});
//default start char is 'X', if user selects 'O' invoke ai to go
if (aiCharacter === 'X') {
this.changeTurn(this.bestSpot(), aiCharacter);
}
}                        

render() {
var showPlayButton = (this.state.result === '') ? 'invis' : 'vis d-flex justify-content-center';
return (
<div>
<div className={showPlayButton}>
<button id="replay-button" className="btn btn-danger" onClick={this.startGame}>Play Again</button>
</div>
<Choosechar
menuVisible={this.state.menuVisible}
charSelect={this.props.charSelect}  
/>
</div>
);
}
}
export default Game;

嗨，abhijeet，谢谢你更新的代码，我已经更新了我的代码，但我仍然得到错误，也添加了截图，请看看它

Answer 1

您需要更改">this.props";">">

<Choosechar menuVisible={this.state.menuVisible} charSelect={this.charSelect}/>

关于">this";

你还需要传递">props";在super ()在"Choosechar"类组件使用">this";进一步查看component

class Choosechar extends React.Component {
constructor(props) {
super(props);

关于super