прозрачная коробка ввода при определенном состоянии реагирует

Question

Я делаю get запрос на викторину api. Когда пользователь получит ответ правильно, будет показан следующий ответ.

Все это хорошо работает, однако у меня возникли проблемы при попытке очистить поле ввода, когда пользователь правильно ответит. 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> 
    ) 
} 

});