javascript - 清除输入框在某些条件下的 react

Question

我正在向测验 API 发出 get 请求。当用户得到正确的答案时，将显示下一个答案。

这一切都运行良好，但是当用户得到正确答案时尝试清除输入框时，我遇到了一些麻烦。 I read this earlier据我所知，它应该遵循相同的逻辑。

谁能发现这里出了什么问题吗？

var Quiz = React.createClass({

    getInitialState: function() {
        return {
                question: '',
                answer: '',
                value: '',
                score: 0
            }
    },

    getData: function() { 
        $.get('http://jservice.io/api/random', function(data){
            var response = data[0];
            console.log(response)

            this.setState({
                question: response.question,
                answer: response.answer
            })
        }.bind(this));
    },

    componentDidMount: function() {
        this.serverRequest = this.getData()
    },

    checkAnswer: function(event) {
        if(event.target.value.toLowerCase() === this.state.answer.toLowerCase()) {
            this.setState({
                score: this.state.score + 1,
                value: ''
            })
            this.getData();
        }
    },

    skipQuestion: function() {
        this.getData();
    },

    render: function() {
        var value = this.state.value
        return (
            <div>
                <p>{this.state.question}</p>
                <input type='text' value={value}  onChange={this.checkAnswer}/>
                <p onClick={this.skipQuestion}>New question</p>
                <p>{this.state.score}</p>
            </div>
        )
    }

});

Answer 1

我将此代码移至 jsbin并且您的输入清除逻辑工作正常。但是，正如 @finalfreq 在您的实现中提到的那样，不可能在输入框中输入完整的答案，每个输入都会被识别但永远不会显示。解决方法如下所示。唯一的变化是在 checkAnswer 中添加 else 情况:

var Quiz = React.createClass({

getInitialState: function() {
    return {
            question: '',
            answer: '',
            value: '',
            score: 0
        }
},

getData: function() { 
    $.get('http://jservice.io/api/random', function(data){
        var response = data[0];
        console.log(response)

        this.setState({
            question: response.question,
            answer: response.answer
        })
    }.bind(this));
},

componentDidMount: function() {
    this.serverRequest = this.getData()
},

checkAnswer: function(event) {
    if(event.target.value.toLowerCase() === this.state.answer.toLowerCase()) {
        this.setState({
            score: this.state.score + 1,
            value: ''
        })
        this.getData();
    } else {
        this.setState({
            value: event.target.value.toLowerCase()
        })
    }
},

skipQuestion: function() {
    this.getData();
},

render: function() {
    var value = this.state.value
    return (
        <div>
            <p>{this.state.question}</p>
            <input type='text' value={value}  onChange={this.checkAnswer}/>
            <p onClick={this.skipQuestion}>New question</p>
            <p>{this.state.score}</p>
        </div>
    )
}

});