Question

我正在使用react和js创建一个子手游戏。按下“猜词”按钮后，我想使用一个提示框让用户输入他们认为的完整词。但是，当我在提示框中输入单词时，出现“ TypeError：对象不支持属性或方法'checkWholeWord'”。我是JS编码的新手，我真的不知道自己在做什么错。

import React, { Component } from 'react';
import './App.css';
import words from './words'

class App extends Component {
    //chooses random word
    state = {
        word: words[Math.floor(Math.random() * words.length)],
        guessedLetters: [],
        guessesRemaining: 6
    }

    //pass function to child to update
    updateGuessedLetters(letter){
        if(this.state.guessedLetters.includes(letter)){
            alert('ALREADY TRIED THAT')
        }else{
            this.setState({
                //makes new array with letter
                guessedLetters: [...this.state.guessedLetters, letter]
            })
        }
    }

    //keeps track of how many times wrong letter is entered
    updateGuessesRemaining(letter){
        if(!this.state.guessedLetters.includes(letter) && !this.state.word.split('').includes(letter)){
            this.setState({guessesRemaining: this.state.guessesRemaining -1})
        }
    }
    //fix this function 
    wordIsGuessed(){
        const guessState = this.state.word.split('').map(letter => {
            if (this.state.guessedLetters.includes(letter)){
                return letter
            }
        })
        return guessState.join('') === this.state.word
    }

    //checks if game is over by checking guesses remaining
    gameOver(){
        if(this.state.guessesRemaining <= 1){
            alert('You lose')
        }else if (this.wordIsGuessed()){
            alert('You win!')
        }
    }

    //when someone attempts to guess whole word checks inputted word
    checkWholeWord(wholeWord){
        if (wholeWord===this.state.word){
            alert('You Win')
        }
    }
    //called every time a letter is submitted, if gameover then end
    updateGameState(letter){
        this.gameOver()
        this.updateGuessedLetters(letter)
        this.updateGuessesRemaining(letter)
    }

    render() {
        return (
          <div className="App">
            <h1>Hangman</h1>
            {this.state.word}
            <DisplayWord word={this.state.word} guessedLetters={this.state.guessedLetters}/>
            <SubmitGuess updateGameState = { (letter) => this.updateGameState(letter)}/>
            <WrongLetters word={this.state.word} guessedLetters={this.state.guessedLetters}/>
          </div> 
    );
  }
}

class DisplayWord extends Component{
    render(){
        //splits word into array
        const wordLetters = this.props.word.split('')

        const answer = wordLetters.map(letter =>  {
            let letterState = '_' + ' '
            if(this.props.guessedLetters.includes(letter)){
                letterState=letter 
            }
            return letterState
        })
        return(
            <div className="DisplayWord">
                <h3>{answer}</h3>
            </div>
        );
    }
}
class WrongLetters extends Component {
    getWrongLetters(){
        //filter checks if letter is in word
        const wrong = this.props.guessedLetters.filter(letter =>{
               return !this.props.word.split('').includes(letter)
            })
        return wrong
    }
    render(){
        return(
            <div className="WrongLetters">  
            {this.getWrongLetters()}
            </div>
        );
    }
}
//takes guess from user
class SubmitGuess extends Component {
    //ensures that the page doesn't refresh completely
    handleSubmit = (e) => {
        e.preventDefault()
        //gets value from user
        const input = this.refs.textInput.value
        this.props.updateGameState(input)
        //resets value to empty
        this.refs.textInput.value = ''
    }

    guessWholeWord = (e) => {
        e.preventDefault()
        const wholeWord = prompt ("Guess the word :)")
        this.props.checkWholeWord(wholeWord)
   }

    render(){
    return(
        <div>
            <form ref="form" onKeyUp={this.handleSubmit}>
                <input type="text"  ref='textInput' maxLength='1'/>
                <button>New Game</button>        
            </form>
            <form ref="forms" onSubmit={this.guessWholeWord}>
            <button type ="submit">Guess Word</button>
            </form>

        </div>
        );
    }
}


export default App;

Answer 1

guessWholeWord = (e) => {
        e.preventDefault()
        const wholeWord = prompt ("Guess the word :)")
        if (wholeWord===this.state.word){
            alert('You win!')
        }
    }
    render() {
        return (
          <div className="App">
            <h1>Hangman</h1>
            {this.state.word}
            <DisplayWord word = {this.state.word} guessedLetters={this.state.guessedLetters}/>
            <SubmitGuess updateGameState = { (letter) => this.updateGameState(letter)}/>
            <WrongLetters word={this.state.word} guessedLetters={this.state.guessedLetters}/>
            <form ref="forms" onSubmit={this.guessWholeWord}>
            <button type ="submit">Guess Word</button>
            </form>
          </div> 
    );

如何将从提示输入的值传递给函数？

1 个答案: