流星（REACT） - 無法更新輸入文本值

Question

無法更改/更新來自數據庫的輸入值。試圖瞭解https://facebook.github.io/react/docs/forms.html，但沒有得到它。

基本上代碼是關於以表格格式顯示角色集合數據，更新工具是模態輸入字段。

這是我UMRolesList.jsx

export default class UMRolesList extends TrackerReact(Component) { 
    rolesListData(){ 
     return Meteor.roles.find({}).fetch(); 
    } 

    constructor(){ 
    super(); 
    this.state = { 
     subscription : { 
         "rolesData" : Meteor.subscribe('rolefunction'), 
         } 
       } 
    } 

    render(){ 

     return(

      <section className="Content"> 
       <div className="row reportWrapper"> 
        <div className="col-md-10 col-lg-12 col-sm-12 col-xs-12 noLRPad"> 
         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 noLRPad"> 
         <h1 className="reportTitleName">LIST OF ROLES</h1> 
         <hr/>    
          <UMaddRoles/> 


          <table className="table-responsive table table-striped table-hover myTable dataTable no-footer"> 
           <thead className="table-head umtblhdr"> 
            <tr className="hrTableHeader"> 
             <th className="umHeader"> Role </th> 
             <th className="umHeader"> Action </th> 
            </tr> 
           </thead> 
           <tbody> 
            { this.rolesListData().map((rolesData)=>{ 
             return <UMadd_role key={rolesData._id} roleDataVales={rolesData}/> 
             }) 
            }      
           </tbody> 
          </table> 

         </div> 
        </div> 
       </div> 
      </section> 

    ); 

} 

} 

這是我UMadd_role.jsx

export default class UMadd_role extends TrackerReact(Component) { 

    handleChange(event){ 
     console.log("changing the text area to: " + event.target.value) 
     this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
     alert('A name was submitted: ' + this.state.value); 
     event.preventDefault(); 
    } 


    constructor(props) { 
    super(props); 
    this.state = { 
     roleName: props.roleDataVales.name, 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    render(){ 

    return(
      <tr> 
       <td> {this.props.roleDataVales.name}</td>   
       <td> 
        <button className="editrole fa fa-pencil-square-o" data-toggle="modal" data-target={`#edit-${this.props.roleDataVales._id}`} ></button> 


        <div id={`edit-${this.props.roleDataVales._id}`} className="modal fade" role="dialog"> 
         <div className="modal-dialog"> 


         <div className="modal-content reportWrapper"> 
          <div className="modal-header"> 
          <button type="button" className="close" data-dismiss="modal">&times;</button> 
          <h4 className="modal-title">Edit Role</h4> 
          </div> 
          <div className="modal-body col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
           <form className="editroles"> 
            <div className="form-group col-lg-5 col-md-4 col-xs-12 col-sm-12 paddingLeftz"> 
             <label>Role Name*</label> 
             <input type="text" ref="roleName" className="form-control rolesField" name={`${this.props.roleDataVales._id}-Namerole`} value=value={`${this.state.roleName}`} onChange={this.handleChange.bind(this)} required/> 
            </div> 
            <div className="form-group col-lg-1 col-md-4 col-xs-12 col-sm-12 "> 
             <label>&nbsp;</label> 
             <button type="button" onClick={this.editRole.bind(this)} id={this.props.roleDataVales._id} className="btn btn-primary submit" data-dismiss="modal">Edit Role</button> 
            </div> 
           </form> 
          </div> 
          <div className="modal-footer"> 
          <button type="button" className="btn btn-primary" data-dismiss="modal">Close</button> 
          </div> 
         </div> 

         </div> 
        </div> 
       </td>  
      </tr> 
    ); 

} 
} 

提前感謝！

Answer 1

辦理變更事件來改變你的價值並將其設置爲當前狀態

handleChange(event){ 
    this.setState({value: event.target.value}); 
} 

在構造函數中，存儲你的價值可以從數據庫是props.roleDataVales.name現身並將其保存在狀態，這是（在構造函數中定義的）{this.state.roleName}。

constructor(props) { 
super(props); 
this.state = { 
    roleName: props.roleDataVales.name, 
}; 
this.handleChange = this.handleChange.bind(this); 
} 

最後使用defaultValue代替value屬性並綁定onChange事件來輸入。提供{this.state.roleName}至defaultValue它來自構造函數。

<input type="text" ref="roleName" defaultValue={`${this.state.roleName}`} onChange={this.handleChange.bind(this)}/> 

Answer 2

原因可能是因爲您已分配了this.props.roleDataVales.name並且輸入字段沒有onChange。

嘗試將值this.props.roleDataVales.name存儲在構造方法中的狀態中，並在輸入字段上具有onChange來更新值。