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

原因可能是因为您已分配this.props.roleDataVales.name并且输入字段没有onChange。

尝试将值this.props.roleDataVales.name存储在构造函数中的状态中，并在输入字段上使用onChange来更新值。

Answer 2

处理更改事件以更改您的值并将其设置为当前状态

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

在构造函数中，存储可能来自数据库的值，该值是props.roleDataVales.name并将其保存在（在构造函数中定义） {this.state.roleName} 的状态。< / p>

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)}/>

Meteor（REACT） - 无法更新输入文本值

2 个答案: