2016-05-16 37 views
5

Ho un pulsante che quando viene cliccato dovrebbe cambiare il colore del pulsante in rosso, lo faccio cambiando stato per aggiornare la classe del componente per renderlo .red class aggiornando così il colore e dopo 4s tornerebbe normale. In un modo o nell'altro, non aggiorna e non ricrea il componente. Il mio codice:Lo stato di cambio js non aggiorna il componente

import React from "react"; 
import ReactDom from "react-dom"; 

const app = document.getElementById("app"); 
class Layout extends React.Component{ 
constructor(props){ 
    super(props); 
    this.users =[ 
      { 
       name:"user1", 
       world:"88", 
      },{ 
       name:"user12", 
       world:"882", 
      },{ 
       name:"user13", 
       world:"883", 
      },{ 
       name:"user14", 
       world:"884", 
      },{ 
       name:"user14", 
       world:"884", 
      },{ 
       name:"user15", 
       world:"885", 
      },{ 
       name:"user16", 
       world:"886", 
      },{ 
       name:"user17", 
       world:"8867", 
      },{ 
       name:"user18", 
       world:"8868", 
      } 
    ]; 
    this.ulist = this.users.map((user, i) => { 
     var cName = i<5 ? "active":"nonActive"; 
     return <div key = {i} className = {cName}><h4>{user.name}</h4><p>{user.world}</p></div>; 
    }); 
    this.state = { 
     lastUser:4, 
     firstUser:0, 
     errorUp:"", 
     errorDown: "", 
    }; 
} 
moveUp(){ 
     this.state.errorUp = "red"; 
     setTimeout(() =>{ 
      this.state.errorUp = ""; 
     },4000); 
} 
render(){ 
    return(
     <div> 
     <i className={"fa fa-caret-up arrow "+ this.state.errorUp} aria-hidden="true" onClick = {this.moveUp.bind(this)}></i> 
     <i className={"fa fa-caret-down arrow "+ this.state.errorDown} aria-hidden="true"></i> 
     {this.ulist} 
     </div> 
    ); 
} 
} 
ReactDom.render(<Layout/>,app); 

Perché questo potrebbe essere happening.And c'è qualche altro modo per aggiungere classe al componente in modo che si sarebbe update.Thank per il vostro tempo;

+2

Usa 'this.setState', non muta' this.state'. Inoltre, dovresti fare 'users.map()' nella tua funzione 'render'. – Aaron

+0

Sto solo condividendo un'idea: quando cambio una proprietà, uso 'this.setState ({errorUp:" red "})'. Potrebbe essere questo? – Pierfrancesco

risposta

11

è necessario utilizzare il metodo this.setState({property:value}) anziché this.state.something = "value" per impostare il nuovo stato. this.state.errorUp = "rosso" non funzionerà, perché lo stato di impostazione è un'operazione asincrona e il metodo setState è stato creato a tale scopo.

+2

Sì, funziona grazie. – August