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在您的实现中提到的那样，无法在输入框中输入完整的答案，每个输入都会被识别但永远不会显示。对此的修复如下所示。唯一的变化是在else中添加checkAnswer案例：

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>
    )
}

});

在一定条件下清除输入框的反应

1 个答案: