javascript - React表单刷新整个页面onSubmit和setState不起作用

Question

我正在向 https://random-word-api.herokuapp.com/ 发出获取请求得到一个词我在页面上显示该单词，并要求用户在下面的输入框中键入该单词。一旦用户输入它，然后按提交或输入，我就会检查该单词是否正确，如果正确，我会执行另一个获取请求来获取新单词。但这会刷新我的整个页面，并且分数计数器不会增加不知道我做错了什么。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

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

Answer 1

handleSubmit函数存在两个问题。

您在 preventDefault 中存在拼写错误。它需要大写 D。

因为您已经使用普通声明编写了该函数，所以 this 未绑定(bind)。所以你要么必须自己绑定(bind)它

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

或者更好地将其转换为箭头函数:

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

这样，该函数将自动被 React 绑定(bind)。​​