Javascript React表单在提交时刷新整个页面，并设置状态不工作

我正在请求得到一个单词 我在页面上显示该单词，并要求用户在下面的输入框中键入该单词。 一旦用户键入它，并按submit或enter，我检查并查看单词是否正确，如果正确，我会执行另一个get请求以获取新单词。但这会刷新我的整个页面，分数计数器不会增加 不知道我做错了什么。 此外，event.preventDefault（）也无法按预期工作

import React from 'react';
import getWord from './API/Word';
import key from './API/Key';

class App extends React.Component {
    state = {
        value: '',
        word: null,
        score: 0
    }

    handleSubmit(event) {
        event.preventdefault();
        if (this.state.word === this.state.value) {
            this.setState({score: this.state.score + 1});
            this.getWord();
        }
    }

    getWord() {
        getWord.get(`/word?key=${key}&number=1`)
        .then(response => {
            this.setState({word: response.data[0]})
        });
    }

    componentDidMount() {
        this.getWord();
    }

    render() {
        return (
            <div className = 'ui container'>
                <p>The Word: {this.state.word}</p>
                <br></br>
                <form className = "ui form" onSubmit = {this.handleSubmit}>
                    <div className = "ui field">
                        <label>Type the word: </label>
                        <input 
                            type = "text" 
                            value = {this.state.value} 
                            onChange = {(e) => this.setState({value: e.target.value})}
                        />
                    </div>
                    <button>Submit</button>
                </form>
                <br></br>
                Score: {this.state.score}
            </div>
        )
    }
}

export default App

从“React”导入React；
从“/API/Word”导入getWord；
从“/API/key”导入密钥；
类应用程序扩展了React.Component{
状态={
值：“”，
字：空，
分数：0
}
handleSubmit（事件）{
event.preventdefault（）；
if（this.state.word==this.state.value）{
this.setState（{score:this.state.score+1}）；
这个.getWord（）；
}
}
getWord（）{
get（`/word？key=${key}&number=1`）
。然后（响应=>{
this.setState（{word:response.data[0]}）
});
}
componentDidMount（）{
这个.getWord（）；
}
render（）{
返回(
单词：{this.state.Word}




键入单词：
this.setState（{value:e.target.value}）}
/>
提交



分数：{this.state.Score}
)
}
}
导出默认应用程序

---

我在控制台中很快收到此错误消息，然后它消失了

handleSubmit函数有两个问题

您在

preventDefault

中有一个输入错误。它需要大写D

而且，由于您编写的函数具有普通声明，

此

未绑定。所以你要么自己绑起来

onSubmit = {this.handleSubmit.bind(this)}

或者最好将其转换为箭头函数：

handleSubmit = (event) => {
        event.preventDefault();
...
}

---

通过此操作，React将自动绑定函数。

handleSubmit函数有两个问题

您在

preventDefault

中有一个输入错误。它需要大写D

而且，由于您编写的函数具有普通声明，

此

未绑定。所以你要么自己绑起来

onSubmit = {this.handleSubmit.bind(this)}

或者最好将其转换为箭头函数：

handleSubmit = (event) => {
        event.preventDefault();
...
}

---

有了这个功能，React将自动绑定函数。

typo*箭头函数和未命名函数。键入*箭头函数和未命名函数。