陣營：模板樣式屬性不被的setState

Question

考慮我的代碼示例（忘記密碼的形式）

import React, { PropTypes, Component } from 'react'; 
import $ from 'jquery'; 
import ManageCountry from '../ManageCountry'; 

import './style.css'; 
import {CONFIG} from '../const.js'; 

export default class Forgotpwd extends Component { 

    state = { 
     passwordText : "", 
     passwordTextConfirm : "", 
     expirated_reset_request: "none" 
    } 

    trad = {}; 
    constructor() { 
     super(); 
     ManageCountry.applyTradToState("single_sign_on", this.trad,() => { 
      var trad = this.trad.message.reset_password_form[0]; 
      this.template = (
       <div id="forgotpwd-form" role="form" > 
        <h3>{trad.form_title}</h3> 
        <p>{trad.form_desc}</p> 
        <div className="form-group"> 
         <label htmlFor="emailfpwd">{trad.password_label}</label> 
         <input onChange={(password) => this.setState({passwordText:password.target.value})} type="email" id="emailfpwd" className="form-control" placeholder={trad.password_label}/> 
        </div> 
        <div className="form-group"> 
         <label htmlFor="emailfpwd">{trad.password_confirmation_label}</label> 
         <input onChange={(password) => this.setState({passwordTextConfirm:password.target.value})} type="email" id="emailfpwd" className="form-control" placeholder={trad.password_label}/> 
        </div> 
        <p id="expirated_reset_request" style={{display : this.state.expirated_reset_request}}>{trad.expirated_reset_request}</p> 
        <div className="form-group"> 
         <div className="row"> 
          <div className="col-sm-6 col-sm-offset-3"> 
           <button onClick={this.resetPwd.bind(this)} className="form-control btn btn-login">{trad.submit_label}</button> 
          </div> 
         </div> 
        </div> 
       </div> 
      ); 
     }); 
    } 

    resetPwd() { 
     var validate = this.validatePassword(); 
     var token = window.location.href.split('=').pop(); 
     console.log(token); 
     if(!token.match(new RegExp(/^[a-f\d.]+$/))) { 
      alert(this.trad.message.reset_password_form[0].bad_reset_request); 
      return false; 
     } 
     if(validate.success) { 
      $.post(CONFIG.APIURL+"user/forgotpwd/"+token, {password: this.state.passwordText}, (r) => { 
       if(r.success) { 
        window.location = "/"+ManageCountry.getUrlRoute()+"/login"; 
       } else { 
        //$('#expirated_reset_request').css('display', 'block'); 
        this.setState({expirated_reset_request : "block"}); 
        console.log(this.state.expirated_reset_request); 
        //'block', but in HTML, the style is always 'none' 
       } 
      }, 'JSON'); 
     } 
    } 

    validatePassword() { 
     if(this.state.passwordText != this.state.passwordTextConfirm) return {success : false, msg : "Les mots de passe ne correspondent pas"}; 
     if(this.state.passwordText.length < 8) return {success : false, msg : "Le mot de passe doit faire 8 caractères au minimum"}; 
     return {success : true}; 
    } 

    render =() => { 
     return this.template; 
    } 
} 

我想更新與形狀誤差，這裏的expirated_reset_request財產國家財產更新。

所以你可以看到，的onClick執行RESETPWD功能和$。員額回調，我更新的狀態來改變從零（初始）顯示阻塞。

將被執行console.log說要我只是在這之後的狀態是先進的日期，但樣式屬性的HTML永遠不會改變（一直沒有）

我是不是忘了什麼東西？

在此先感謝

Answer 1

從我所看到的，this.template變量被填充一次。

這是有道理的，那麼，它永遠不會改變。

有它每次重新求值，把它變成一個函數：

this.template =() => (
    <div ... 
)