Javascript 制造；请在空白处填写“；反应 我很新的反应，我试图填补一个空白的应用程序作出反应。基本上，我有一篇有单词表的文章。我想用一个空格替换所有出现的单词，以便用户可以键入答案。之后，如果用户单击submit按钮，它会显示结果，显示正确的数量

在做了一些研究之后，我找到了一个可以用react组件安全地替换字符串的包。这就是我在文章中生成空格的方式：

getFillInTheBlank() {
    let passage = this.passage;
    for (var i = 0; i < this.wordList.length; i++) {
        let regexp = new RegExp("\\b(" + this.wordList[i] + ")\\b", "gi");
        passage = reactStringReplace(passage, regexp, (match, i) => (
            <input type="text"></input>
        ));
    }
    return <div>passage</div>
}

getFillingBlank（）{
让passion=this.passion；
for（var i=0；i(
));
}
回流通道
}

---

但是，当单击submit按钮时，我想不出一种方法来检查每个输入文本和相应的单词以计算分数。有人能建议一种方法吗？提前感谢。

您不想创建空白字符串

看看这段代码，看看你是否理解它

var answer = document.getElementById('guess-input').name;

var hint = document.getElementById('guess-input').value;

function guessAnswer() {
  $("button.guess-submit").click(function(event) {

    var guess = $('#guess-input').val();
    guess = guess.toLowerCase();

    if ( guess == answer) {
      $('#correct').show();
      $('#wrong').hide();
    } else {
      $('#wrong').show().fadeOut(1000);
      $('#guess-input').val(hint);
    }

  });

}

function enterSubmit() {
   $("#guess-input").keyup(function(event){
      if(event.keyCode == 13){
          $("#guess-submit").click();
      }
   });

  guessAnswer();
}

enterSubmit();

if ( $('#correct').css('display') == 'block') {
    alert('hi');
}

---

我建议向服务器发送一个包含问题和答案的请求，并返回结果。如果您将分数或答案保存在前端，则游戏可能会被更改

我使用Mobx制作了它，但是它可以很容易地编辑，在没有这个库的情况下工作

这是一个模型，其中包含单词猜测和主要事件回调

word-guess.tsx

import { makeAutoObservable } from "mobx";
export class WordGuess {

private wordToGuess: string;

// Needed to select the next empty char when the component gain focus
private nextEmptyCharIndex = 0;

guessedChars: string[];
focusedCharIndex = -1;

constructor(wordToGuess: string) {
    this.wordToGuess = wordToGuess;

    // In "guessedChars" all chars except white spaces are replaced with empty strings
    this.guessedChars = wordToGuess.split('').map(char => char === ' ' ? char : '');
    makeAutoObservable(this);
}

onCharInput = (input: string) => {
    this.guessedChars[this.focusedCharIndex] = input;
    this.focusedCharIndex += 1;

    if(this.nextEmptyCharIndex < this.focusedCharIndex){
        this.nextEmptyCharIndex = this.focusedCharIndex;
    }
};

onFocus = () => this.focusedCharIndex = 
    this.nextEmptyCharIndex >= this.wordToGuess.length ? 0 : this.nextEmptyCharIndex;
onFocusLost = () => this.focusedCharIndex = -1;
}

import './guess-input.scss';
interface CharToGuessProps {
    value: string;
    focused: boolean;
}
export const CharToGuess = (props: CharToGuessProps) => {
    const { focused, value } = props;

    return <span className={`char-to-guess ${focused ? ' focused-char' : ''}`}>
        {value || '_'} 
    </span>;
};

从“mobx”导入{makeAutoObservable}；
导出类WordGuess{
私有wordToGuess:string；
//需要在组件获得焦点时选择下一个空字符
私有NextEntryCharIndex=0；
猜字符：字符串[]；
focusedCharIndex=-1；
构造函数（wordToGuess:string）{
this.wordToGuess=wordToGuess；
//在“guessedChars”中，除空格外的所有字符都替换为空字符串
this.guessedChars=wordToGuess.split（“”）.map（char=>char===“”？char:“”）；
使自动可观察（此）；
}
onCharInput=（输入：字符串）=>{
this.guessedChars[this.focusedCharIndex]=输入；
this.focusedCharIndex+=1；
if（this.nexterytycharindexthis.focusedCharIndex=
this.nextenticharindex>=this.wordToGuess.length？0:this.nextenticharindex；
onFocusLost=（）=>this.focusedCharIndex=-1；
}

输入组件

guess-input.tsx

interface GuessInputProps {
    wordGuess: WordGuess;
}
export const GuessInput = observer((props: GuessInputProps) => {

const { guessedChars, focusedCharIndex, onCharInput, onFocus, onFocusLost } = 
    props.wordGuess;

const containerRef = useRef(null);

const onClick = useCallback(() => {
    const ref: any = containerRef?.current;
    ref?.focus();
}, []);

useEffect(() => {

    const onKeyDown = (params: KeyboardEvent) => {
        const key = params.key;
        if (focusedCharIndex >= 0 && key.length === 1 && key.match(/[A-zÀ-ú]/)) {
            onCharInput(params.key);

            // Clear focus when last character is inserted
            if(focusedCharIndex === guessedChars.length - 1) {
                const ref: any = containerRef?.current;
                ref?.blur();
            }
        }
    };

    document.addEventListener('keydown', onKeyDown);
    return () => {
        document.removeEventListener('keydown', onKeyDown);
    };
}, [focusedCharIndex, guessedChars]);

return <div className='guess-input' 
    onClick={onClick} ref={containerRef} 
    onFocus={onFocus} onBlur={onFocusLost} tabIndex={-1}>
        {guessedChars.map((char, index) => 
          <CharToGuess key={index} value={char} focused={index === focusedCharIndex} />)
        }
</div>;
});

接口猜测输入道具{
wordGuess:wordGuess；
}
export const GuessInput=观察者（（props:GuessInputProps）=>{
常量{guessedChars，focusedCharIndex，onCharInput，onFocus，onFocusLost}=
道具；单词猜测；
const containerRef=useRef（null）；
const onClick=useCallback（（）=>{
const ref:any=containerRef？.current；
ref？.focus（）；
}, []);
useffect（（）=>{
const onKeyDown=（参数：KeyboardEvent）=>{
常量键=参数键；
if（focusedCharIndex>=0&&key.length==1&&key.match（/[A-zÀ-u]/）{
onCharInput（参数键）；
//插入最后一个字符时清除焦点
if（focusedCharIndex==guessedChars.length-1）{
const ref:any=containerRef？.current；
ref？.blur（）；
}
}
};
文件。添加的监听器（'keydown'，onKeyDown）；
return（）=>{
文档。删除VentListener（“键控”，onKeyDown）；
};
}，[focusedCharIndex，猜测字符]；
返回
{guessedChars.map（（字符，索引）=>
)
}
;
});

表示每个字符的组件

char-to-guess.tsx

import { makeAutoObservable } from "mobx";
export class WordGuess {

private wordToGuess: string;

// Needed to select the next empty char when the component gain focus
private nextEmptyCharIndex = 0;

guessedChars: string[];
focusedCharIndex = -1;

constructor(wordToGuess: string) {
    this.wordToGuess = wordToGuess;

    // In "guessedChars" all chars except white spaces are replaced with empty strings
    this.guessedChars = wordToGuess.split('').map(char => char === ' ' ? char : '');
    makeAutoObservable(this);
}

onCharInput = (input: string) => {
    this.guessedChars[this.focusedCharIndex] = input;
    this.focusedCharIndex += 1;

    if(this.nextEmptyCharIndex < this.focusedCharIndex){
        this.nextEmptyCharIndex = this.focusedCharIndex;
    }
};

onFocus = () => this.focusedCharIndex = 
    this.nextEmptyCharIndex >= this.wordToGuess.length ? 0 : this.nextEmptyCharIndex;
onFocusLost = () => this.focusedCharIndex = -1;
}

import './guess-input.scss';
interface CharToGuessProps {
    value: string;
    focused: boolean;
}
export const CharToGuess = (props: CharToGuessProps) => {
    const { focused, value } = props;

    return <span className={`char-to-guess ${focused ? ' focused-char' : ''}`}>
        {value || '_'} 
    </span>;
};

import'/guess input.scss'；
界面图表工具{
值：字符串；
重点：布尔；
}
导出常量CharToGuess=（道具：CharToGuessProps）=>{
const{focused，value}=props；
返回
{value}
;
};

一般来说，你应该对你的答案添加注释和解释。这是react中的解决方案，而不是Jquery中的解决方案。哦，更好的是，使用State。