Fatal编程技术网
  • javascript/
  • Javascript 在输入值更改时更新其他组件

Javascript 在输入值更改时更新其他组件

javascript reactjs

Javascript 在输入值更改时更新其他组件,javascript,reactjs,Javascript,Reactjs,我正在学习React，并尝试根据输入值更新一个组件。我已经使用html和香草JavaScript完成了这项工作，而且效果很好。我正在尝试使用React实现相同的功能，但我遇到了一些挑战 以下是我的香草javascript代码： index.html <!DOCTYPE html> <html lang="en"> <body> <div> <div>

我正在学习React，并尝试根据输入值更新一个组件。我已经使用html和香草JavaScript完成了这项工作，而且效果很好。我正在尝试使用React实现相同的功能，但我遇到了一些挑战

以下是我的香草javascript代码：

index.html

<!DOCTYPE html>
<html lang="en">

    <body>
        <div>
            <div>
                <div>
                    <h2>Press button when you are ready to play</h2>
                    <input type="text" placeholder="Start typing..." id="word-input" autofocus>
                </div>
            </div>
        </div>

        <script src="script.js"></script>
    </body>

</html>
以下是我迄今为止在React中尝试的内容：

import React, { Component, createRef } from 'react'

export class About extends Component {

    state = {
        words: [
            'rock', 'paper', 'scissors', 'play'
        ],
        current_input: 'Start...',
        current_word: 'break'
    }
    
    inputRef = createRef();

    displayWord = (word) => {

        const Index = Math.floor(Math.random() * word.length);
        let rword = word[Index];

        this.setState({
            current_word: rword
        })

    };
    
    matchWords = (e) => {
        
        this.setState({
            current_input: e.target.value
        })

        if(this.state.current_input === this.state.current_word) {

            this.displayWord(this.state.words); 

            this.setState({
                current_input: ''
            })

            this.inputRef.current.focus();
        };
    };

    render() {
        return (
                <div>
                    <div>
                        <div>
                            <h2 id="current-word">{this.state.current_word}</h2>
                            <input ref={this.inputRef}
                             placeholder='start ..' onChange={this.matchWords} type="text"  id="word-input" autoFocus />
                        </div>  
                    </div>
                </div>
        )
    }
}

export default About

import React，{Component，createRef}来自“React”
导出类关于扩展组件{
状态={
文字：[
‘石头’、‘布’、‘剪刀’、‘玩’
],
当前输入：“开始…”，
当前单词：“break”
}
inputRef=createRef（）；
displayWord=（word）=>{
const Index=Math.floor（Math.random（）*word.length）；
设rword=单词[索引]；
这是我的国家({
当前单词：rword
})
};
匹配词=（e）=>{
这是我的国家({
当前输入：e.target.value
})
if（this.state.current\u输入===this.state.current\u字）{
this.displayWord（this.state.words）；
这是我的国家({
当前\u输入：“”
})
this.inputRef.current.focus（）；
};
};
render（）{
返回(
{this.state.current_word}
)
}
}
导出默认值关于
它似乎起作用了。但是，问题是在我输入单词后它不会更新-我必须在看到新单词出现之前尝试删除输入框的内容。此外，它不会自动清除内容并自动聚焦在输入框中，以便我键入新词。我想知道我遗漏了什么，而且就最佳实践而言，这是使用React做类似事情的最佳方式还是“正确”方式。谢谢

我认为，您应该在函数
匹配词中更改代码，如下所示：


  matchWords = (e) => {
    if (e.target.value === this.state.current_word) {
      this.displayWord(this.state.words);

      this.setState({
        current_input: ""
      });

      this.inputRef.current.focus();
    } else {
      this.setState({
        current_input: e.target.value
      });
    }
  };



它不会像您期望的那样立即运行，因为当比较
if（this.state.current\u input===this.state.current\u word）
当前输入是旧值时，
setState
会异步运行。就像当你键入
break
时，比较是
if（'brea'='break'）
我认为，你应该在函数
匹配词中更改代码，如下所示：


  matchWords = (e) => {
    if (e.target.value === this.state.current_word) {
      this.displayWord(this.state.words);

      this.setState({
        current_input: ""
      });

      this.inputRef.current.focus();
    } else {
      this.setState({
        current_input: e.target.value
      });
    }
  };


它不会像您期望的那样立即运行，因为当比较
if（this.state.current\u input===this.state.current\u word）
当前输入是旧值时，
setState
会异步运行。与键入
break
时类似，比较是
if（'brea'='break'）


类关于扩展组件{
状态={
tmp:“，
单词：[“石头”、“布”、“剪刀”、“玩”]，
当前_输入：“”，
当前单词：“break”
};
inputRef=createRef（）；
displayWord=（word）=>{
const Index=Math.floor（Math.random（）*word.length）；
设rword=单词[索引]；
这是我的国家({
当前单词：rword
});
};
匹配词=（e）=>{
this.setState（{current_input:e.target.value}，（）=>{
if（this.state.current\u输入===this.state.current\u字）{
this.displayWord（this.state.words）；
这是我的国家({
当前输入：“
});
this.inputRef.current.focus（）；
}
});
};
render（）{
返回(
{this.state.current_word}
这个。匹配词（e）}
type=“text”
id=“word输入”
自动对焦
/>
);
}
}


类关于扩展组件{
状态={
tmp:“，
单词：[“石头”、“布”、“剪刀”、“玩”]，
当前_输入：“”，
当前单词：“break”
};
inputRef=createRef（）；
displayWord=（word）=>{
const Index=Math.floor（Math.random（）*word.length）；
设rword=单词[索引]；
这是我的国家({
当前单词：rword
});
};
匹配词=（e）=>{
this.setState（{current_input:e.target.value}，（）=>{
if（this.state.current\u输入===this.state.current\u字）{
this.displayWord（this.state.words）；
这是我的国家({
当前输入：“
});
this.inputRef.current.focus（）；
}
});
};
render（）{
返回(
{this.state.current_word}
这个。匹配词（e）}
type=“text”
id=“word输入”
自动对焦
/>
);
}

}
只需尝试从输入中删除ref，因为我尝试不使用它，它对我来说效果很好。是的，但它仍然无法自动更新当前单词，清除输入字段并将光标聚焦在字段上。ref是调用
displayWords
后，如何将光标聚焦在输入字段上。除非有另一种方法不使用
ref
来实现这一点，否则请尝试从输入中删除该ref，因为我尝试不使用它，它对我很好。是的，但它仍然无法自动更新当前单词，请清除输入字段并将光标聚焦在该字段上。ref是调用
displayWords
后，如何将光标聚焦在输入字段上。除非有其他方法不使用
ref