我有一个带有 10 个输入字段的 React 表单。我有一个下面的代码来设置每个字段的状态，最后我将此状态提交到数据库。（使用 post 方法通过状态在表中插入记录）。我想知道如何通过 get 方法在每个输入字段中设置每个值。
初始状态：-
this.state = {
UserId : this.props.match.params.id,
FirstName: '',
LastName : '',
EmailId : '',
MobileNo : '',
DivisionId :'',
UserName : '',
Password : '',
ConfirmPassword : '',
RoleId : '',
UpdateUserName : localStorage.getItem("UserId"),
GridState : []
};
提交前在每个输入字段中设置状态值：-
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
this.setState({[nam]: val});
}
通过 Post 方法将记录提交到数据库：-
onSubmitHandler = (event) => {
axios.post(ConfigItem[0].APIPath+'Users/',this.state)
.then(res => {
this.props.history.push('/UserList')
})
}
通过 get 方法从 API 获取插入的记录：-
axios.get(ConfigItem[0].APIPath+'users/' + this.props.match.params.id)
.then(res => {
console.log(res.data.data); ***// I would like to know how to set value in each input field***
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>
);
}