Meteor (REACT) - Eingabetextwert konnte nicht aktualisiert werden

Question

Der Wert der Eingabe, die von der Datenbank kommt, konnte nicht geändert/aktualisiert werden. Versucht zu verstehen https://facebook.github.io/react/docs/forms.html, aber es nicht bekommen.

Grundsätzlich ist Code über Rollensammeldaten im Tabellenformat und Update-Funktion ist in modalen Eingabefeld.

Das ist mein 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> 

    ); 

} 

} 

Das ist mein 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> 
    ); 

} 
} 

Vielen Dank im Voraus!

Answer 1

Ereignis Handelte ändern Sie den Wert ändern und es als aktuellen Zustand

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

In Konstruktor Einstellung, speichern Sie Ihren Wert, der aus der Datenbank kommen werden, die props.roleDataVales.name ist und es im Zustand speichert die ist (im Konstruktor definiert) {this.state.roleName}.

Und schließlich defaultValue anstelle von Wert-Attribut verwenden und onChange-Ereignis an Eingabe binden. Geben Sie {this.state.roleName} zu defaultValue, das vom Erbauer kommt.

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

Answer 2

Der Grund dafür vielleicht, weil Sie this.props.roleDataVales.name zugewiesen haben und es gibt keine onChange für das Eingabefeld.

Versuchen Sie, den Wert this.props.roleDataVales.name im Konstruktor im Status zu speichern und ein onChange on-Eingabefeld zu haben, um den Wert zu aktualisieren.