2017-02-24 6 views
0

Dieser Farbwähler funktioniert aber einen Schritt zurück. Ich habe React 15.4.2 verwendet. Ist es ein Problem in späteren Versionen behoben werden? Falls es meine Schuld ist, bitte, wie "ausstehende Zustand Zustand" zu meistern? Pen http://codepen.io/462960/pen/qrBLje Code:React State Update Schritt hinter

let Input = React.createClass({ 
    getInitialState(){ 
     return { 
     today_color: "#E5D380" 
    }; 
    }, 
    colorChange(e){ 
     this.setState({ 
      today_color: e.target.value 
     }) 
     document.querySelector('html').style.setProperty('--base', this.state.today_color); 
    }, 
    render(){ 
    return (<div> 
      <input className="today_color" onChange={this.colorChange} type="color" defaultValue={this.state.today_color}/> 
      </div>) 
    } 
}) 

Antwort

2

Das Problem, das Sie haben, ist, dass, sobald Sie setState die Komponente rerenders nennen und dieser Code wird nicht wieder genannt:

document.querySelector('html').style.setProperty('--base', this.state.today_color); 

Und das erste Mal aufgerufen wird, , this.state.today_color ist immer noch der vorherige Wert.

Was sollten Sie tun, ist die folgende:

this.setState({ 
    today_color: e.target.value 
},() => document.querySelector('html').style.setProperty('--base', this.state.today_color)); 

Dies stellt sicher, dass die setProperty aufgerufen wird, nachdem setState getan wird und nachdem Sie den richtigen Wert in Ihrem Zustand haben.

Edit: hier ist eine funktionierende .

+0

Antwort akzeptiert und Problem gelöst, @paqash. –

+0

Eigentlich muss man das Häkchen setzen, damit es akzeptiert wird :) – paqash

+0

Ich auch, @paqash, deshalb war ich ein wenig überrascht von deiner Bitte und zeigte, unter Berücksichtigung der Regeln, meine Wertschätzung auf diese Weise. Einer dieser beiden Pfeile ist von mir. –

Verwandte Themen