ReactJS: Element anzeigen oder ausblenden funktioniert nur beim ersten Klick auf die Schaltfläche

Question

Ich habe genau das gemacht, was von der am meisten angenommenen Antwort auf diesen Beitrag show or hide element in react.js gezeigt wurde, um meine Elemente anzuzeigen und zu verbergen.

Aber es funktioniert nur auf den ersten Knopf klicken. Wenn ich einen anderen Wert in mein Formular einfüge und ihn erneut übergebe, bleiben die Daten unverändert. Es geht nie wieder in "Ergebnisse". Was mache ich falsch?

Dies ist der Code aus diesem Link oben:

var Search = React.createClass({ 
    getInitialState: function() { 
     return { showResults: false }; 
    }, 
    onClick: function() { 
     this.setState({ showResults: true }); 
    }, 
    render: function() { 
     return (
      <div> 
       <input type="submit" value="Search" onClick={this.onClick} /> 
       { this.state.showResults ? <Results /> : null } 
      </div> 
     ); 
    } 
}); 

var Results = React.createClass({ 
    render: function() { 
     return (
      <div id="results" className="search-results"> 
       Some Results 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<Search />, document.getElementById('container')); 

EDIT neuen Code:

module.exports = React.createClass({ 
    getInitialState: function() { 
     console.log("in getInitialState"); 
     return { showResults: false }; 
    }, 
    onClick: function(e) { 
     e.preventDefault(); 
     data = null; 
     console.log("in onClick"); 
     ticId = ReactDOM.findDOMNode(this.refs.ticketid).value; 
     if (this.state.showResults == true) // second button click (update data) 
     { 
      var newdata = ""; 
      $.ajax({ 
      url: 'http://localhost:x/' + 'tickets', 
      type: 'GET', 
      dataType: 'json', 
      async: false, 
      headers: { 
       "Authorization": "Basic " + btoa(u + ":" + p) 
      },  
      data: {ticketid: ticId}, 
      success: function(result) { 
       newdata = result.results; 
       } 
      }); 

      if(newdata) 
      { 
       console.log(newdata); //SUCCESS: getting new data here 
      } 

      this.state.data = newdata; //FAIL: state not getting refreshed 
     } 

     else 
     { 
      this.setState({ showResults: true }); 
     } 
    }, 
    render: function() { 
     return (
      <div className='someclass'> 
       <form className="someForm" onSubmit={this.onClick}> 
        <input type="text" placeholder = "Enter ticket Id" ref="ticketid" /> 
        <input type="submit" value="Find!!" /> 
        { this.state.showResults ? <Results /> : null } 
       </form> 

      </div> 
     ); 
    } 
}); 

Answer 1

Sie müssen wechseln als

onClick: function() { 
     this.setState({ showResults: !this.state.showResults }); 
    }, 

Answer 2

Besser diese verwenden:

onClick: function() { 
    this.setState(function (prevState) { 
    return { 
     showResults: !prevState.showResults 
    }; 
    }); 
} 

Source