Reactjs 如何通过get方法在每个输入字段中设置状态值

我有一个包含10个输入字段的React表单。我有下面的代码来设置每个字段的状态，最后我将这个状态提交到数据库。（使用post方法通过state在表中插入记录）。我想知道如何通过get方法设置每个输入字段中的值

初始状态：-

提交前在每个输入字段中设置状态值：-

通过Post方法向数据库提交记录：-

通过Get方法从API获取插入的记录：-

HTML呈现：-

render() {
return (
      <form onSubmit={this.onSubmitHandler}>
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" sm="12">
            <Card>
              <CardHeader>
                  <Row>                 
                    <Col xs="8" sm="8">
                      <strong> <i> User Creation Entry </i> </strong>
                    </Col>
                    <Col xs="4" sm="4">
                       <Button type="button"   text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right  ml-1 "><i className="fa fa-ban"></i> Back</Button>
                       <Button type="submit" size="sm" color="success"  className="pull-right  ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>
                    </Col>
                  </Row>

              </CardHeader>

              <CardBody>





                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
                  <div className="col-sm-3">
                    <input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" required onChange={this.onChangeHandler}/>
                  </div>

                </div>

                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
                  <div className="col-sm-3">
                    <input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" onChange={this.onChangeHandler} />
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Division</label>
                  <div className="col-sm-3">
                     <select name ="DivisionId" className="form-control" required onChange={this.onChangeHandler}>
                        {DivisionList}
                      </select>   
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
                  <div className="col-sm-3">
                    <input type="text" name ="UserName" className="form-control form-control-sm" id="TxtUserName" placeholder="User Name" required onChange={this.onChangeHandler}/>
                  </div>

                  </div>

                  <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Password</label>
                  <div className="col-sm-3">
                    <input type="password" name ="Password" className="form-control form-control-sm" id="TxtPassword" placeholder="Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Confirm</label>
                  <div className="col-sm-3">
                    <input type="password" name="ConfirmPassword" className="form-control form-control-sm" id="TxtConfirm" placeholder="Confirm Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Role</label>
                  <div className="col-sm-3">
                  <select name ="RoleId"  data-show-subtext="true" data-live-search="true" className="form-control selectpicker" id="CboRole" required onChange={this.onChangeHandler}>
                        {RoleList}
                      </select>   
                  </div>



                </div>







              </CardBody>
              <CardFooter>
              <div id="data-grid-demo">
        <DataGrid
          dataSource={this.state.GridState}
          ref={ref => this.dataGrid = ref}
          keyExpr="MenuId"
          showBorders={true}
          onToolbarPreparing={this.onToolbarPreparing}
          onRowUpdated={this.onRowUpdated}
        >
          <Paging enabled={false} />
          <Editing
            mode="batch"
            allowUpdating={true}
            selectTextOnEditStart={true}
            startEditAction='click' />
          <Column dataField="UserAccessId" visible={false} />
          <Column dataField="MenuId" visible={false}  />
          <Column dataField="Menu"  />
          <Column dataField="SubMenu"  />
          <Column dataField="ViewAccess" caption="ViewAccess" dataType="boolean"  >
            <CheckBox defaultValue={false} />
          </Column>
          <Column dataField="ZohoParameter"  />
          <Column dataField="Remarks"  />

        </DataGrid>


      </div>
              </CardFooter>
            </Card>
            </Col>
           </Row>
          </div>
          </form>
    );
}

render（）{
返回(
用户创建条目
返回
拯救
名字
姓
电子邮件Id
手机号码
分开
{分区列表}
用户名
暗语
证实
角色
{RoleList}
this.dataGrid=ref}
keyExpr=“MenuId”
showBorders={true}
onToolbarPreparing={this.onToolbarPreparing}
onRowUpdated={this.onRowUpdated}
>
);
}

为每个与类状态相等的

设置值，例如：

<input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" value={this.state.FirstName} placeholder="First Name" required onChange={this.onChangeHandler}/>

如果查询结果属性与您所在州的属性具有相同的名称，您只需执行以下操作：

this.setState({
   ...result.data.data //depending on your result object structure
})

---

第二条语句不起作用，请检查我下面的json数据结果，并建议如何执行

[{"UserId":2009,"FirstName":"jj","LastName":"kk","EmailId":"kk.biz@itytu.com","MobileNo":"9789684772","DivisionId":4,"UserName":"khizer11","Password":"$2b$10$JRG/Zp5TQOJkZPIj2bXFset3gx8DF/OFnrGzZqR4rnC7Bc/a9.yyO","DPassword":"ii@123","RoleId":8,"LoginTag":null,"LoginTime":null,"LogOutTime":null,"SysName":"DELLNETBOOK","UpdateUserName":"","UpdateSysName":null,"UpdateDateTime":null,"DefaultDateTime":

---

如果我理解正确，你可以使用输入的value属性，比如

你能解释一下在stackoverflow页面中在哪里添加投票吗？在我答案的左侧，数字0。它旁边有一个勾号，表示答案为acceptec
render() {
return (
      <form onSubmit={this.onSubmitHandler}>
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" sm="12">
            <Card>
              <CardHeader>
                  <Row>                 
                    <Col xs="8" sm="8">
                      <strong> <i> User Creation Entry </i> </strong>
                    </Col>
                    <Col xs="4" sm="4">
                       <Button type="button"   text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right  ml-1 "><i className="fa fa-ban"></i> Back</Button>
                       <Button type="submit" size="sm" color="success"  className="pull-right  ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>
                    </Col>
                  </Row>

              </CardHeader>

              <CardBody>





                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
                  <div className="col-sm-3">
                    <input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" required onChange={this.onChangeHandler}/>
                  </div>

                </div>

                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
                  <div className="col-sm-3">
                    <input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" onChange={this.onChangeHandler} />
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Division</label>
                  <div className="col-sm-3">
                     <select name ="DivisionId" className="form-control" required onChange={this.onChangeHandler}>
                        {DivisionList}
                      </select>   
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">User Name</label>
                  <div className="col-sm-3">
                    <input type="text" name ="UserName" className="form-control form-control-sm" id="TxtUserName" placeholder="User Name" required onChange={this.onChangeHandler}/>
                  </div>

                  </div>

                  <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Password</label>
                  <div className="col-sm-3">
                    <input type="password" name ="Password" className="form-control form-control-sm" id="TxtPassword" placeholder="Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Confirm</label>
                  <div className="col-sm-3">
                    <input type="password" name="ConfirmPassword" className="form-control form-control-sm" id="TxtConfirm" placeholder="Confirm Password" required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Role</label>
                  <div className="col-sm-3">
                  <select name ="RoleId"  data-show-subtext="true" data-live-search="true" className="form-control selectpicker" id="CboRole" required onChange={this.onChangeHandler}>
                        {RoleList}
                      </select>   
                  </div>



                </div>







              </CardBody>
              <CardFooter>
              <div id="data-grid-demo">
        <DataGrid
          dataSource={this.state.GridState}
          ref={ref => this.dataGrid = ref}
          keyExpr="MenuId"
          showBorders={true}
          onToolbarPreparing={this.onToolbarPreparing}
          onRowUpdated={this.onRowUpdated}
        >
          <Paging enabled={false} />
          <Editing
            mode="batch"
            allowUpdating={true}
            selectTextOnEditStart={true}
            startEditAction='click' />
          <Column dataField="UserAccessId" visible={false} />
          <Column dataField="MenuId" visible={false}  />
          <Column dataField="Menu"  />
          <Column dataField="SubMenu"  />
          <Column dataField="ViewAccess" caption="ViewAccess" dataType="boolean"  >
            <CheckBox defaultValue={false} />
          </Column>
          <Column dataField="ZohoParameter"  />
          <Column dataField="Remarks"  />

        </DataGrid>


      </div>
              </CardFooter>
            </Card>
            </Col>
           </Row>
          </div>
          </form>
    );
}

<input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" value={this.state.FirstName} placeholder="First Name" required onChange={this.onChangeHandler}/>

this.setState({
  FirstName: result.data.FirstName,
  //Add the others by yourself
})

this.setState({
   ...result.data.data //depending on your result object structure
})

[{"UserId":2009,"FirstName":"jj","LastName":"kk","EmailId":"kk.biz@itytu.com","MobileNo":"9789684772","DivisionId":4,"UserName":"khizer11","Password":"$2b$10$JRG/Zp5TQOJkZPIj2bXFset3gx8DF/OFnrGzZqR4rnC7Bc/a9.yyO","DPassword":"ii@123","RoleId":8,"LoginTag":null,"LoginTime":null,"LogOutTime":null,"SysName":"DELLNETBOOK","UpdateUserName":"","UpdateSysName":null,"UpdateDateTime":null,"DefaultDateTime":