我是新来的反应JS，我有日期的文本框的页面上，插入他们工作得很好，因为他们并不需要做预填充。当我编辑的页面，它除了填充日期字段中的所有信息。
我使用下面的代码：
class EditStaff extends Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
id: 0,
continuousdate: new Date(),
probationdays: "",
userstatuscode: "",
sex: "",
domainname: "",
isActive: ""
};
};
componentDidMount() {
API.getItems(userdata).then(items => {
var userDetails = items.user;
debugger
this.setState({
id: userDetails.id,
continuousdate: userDetails.continuousdate,
probationdays: userDetails.probationdays,
userstatuscode: userDetails.userstatuscode,
sex: userDetails.sex,
domainname: userDetails.domainname,
isActive: userDetails.isActive,
});
});
}
handleChange(event) {
const target = event.target;
const name = target.name;
if (target.type === 'checkbox') {
if (target.checked) {
this.setState({ [name]: 1 });
} else {
this.setState({ [name]: 0 });
}
} else
this.setState({ [name]: event.target.value });
}
render() {
if (!this.state) {
<p> Loading....</p>
}
return (
<div>
<Header />
<div className="row">
<div className="container-fluid">
<div className="infoTabs bd-example-tabs">
<div className="" role="tabpanel" aria-labelledby="basic-info-tab" aria-expanded="true">
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="form-row">
<div className=" form-group col-12">
<div className="Password">
<label htmlFor="Password" className="text-primary">Password<span className="required">*</span></label>
<input type="text" className="form-control" maxLength="15" defaultValue={this.state.password} onChange={this.handleChange} name="password" id="password" placeholder="Enter Password" required />
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-12">
<Moment format="YYYY/MM/DD">{this.state.continuousdate}</Moment>
<label htmlFor="continuousdate" className="text-primary">continuousdate<span className="required">*</span></label>
<input type="date" className="form-control" onChange={this.handleChange} value={this.state.continuousdate} name="continuousdate" id="continuousdate" placeholder="Enter continuousdate" required />
</div>
</div>
</div>
<div className="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="form-row">
<div className=" form-group col-12">
<div className="jobstatus">
<label htmlFor="jobstatus" className="text-primary">Job Status<span className="required">*</span></label>
<input type="text" className="form-control" maxLength="2" defaultValue={this.state.jobstatus} onChange={this.handleChange} name="jobstatus" id="jobstatus" placeholder="Enter jobstatus" required />
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-12">
<label htmlFor="probationdays" className="text-primary">probationdays<span className="required">*</span></label>
<input type="number" pattern="[0-9]" className="form-control" maxLength="3" defaultValue={this.state.probationdays} onChange={this.handleChange} name="probationdays" id="probationdays" placeholder="Enter probationdays" required />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="form-row">
<div className=" form-group col-12">
<div className="sex">
<label htmlFor="sex" className="text-primary">sex<span className="required">*</span></label>
<select class="form-control" name="sex" value={this.state.sex} required onChange={this.handleChange} >
{this.state.genderlst.map((gender) => <option key={gender.value} value={gender.value}>{gender.display}</option>)}
</select>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-12">
{/*
<label htmlFor="domainname" className="text-primary">domainname<span className="required">*</span></label>
<input type="text" className="form-control" maxLength="100" onChange={this.handleChange} name="domainname" id="domainname" placeholder="Enter domainname" required />
*/}
<label htmlFor="IsActive" className="text-primary">IsActive<span className="required">*</span></label>
<input type="checkbox" defaultChecked={this.state.isActive} defaultValue={this.state.isActive} name="IsActive" id="IsActive" onChange={this.handleChange} />
</div>
</div>
</div>
<div className="col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div className="form-row">
<div className=" form-group col-12">
{/* <div className="IsActive">
<label htmlFor="IsActive" className="text-primary">IsActive<span className="required">*</span></label>
<input type="checkbox" defaultChecked={this.state.isActive} name="IsActive" id="IsActive" onChange={this.handleChange} />
</div>
*/}
<div className="domainname">
<label htmlFor="domainname" className="text-primary">domainname<span className="required">*</span></label>
<input type="text" className="form-control" maxLength="100" onChange={this.handleChange} value={this.state.domainname} name="domainname" id="domainname" placeholder="Enter domainname" required />
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-12">
</div>
</div>
</div>
</div>
<div>
<button type="submit" className="btn btn-primary btn-lg">Save & Next</button>
</div>
</form>
</div>
{/* </div>*/}
</div>
</div>
</div>
</div>
);
}
}
我曾试图通过静态值，那么它的工作原理，其绑定的值。然后我想有一些问题与值的格式，我试过的东西数量，但他们没有工作，可能是我没有按照正确的方式使用它们。
请帮帮忙，我该怎么绑定值，任何建议将是有益的
问题是，日期格式，尝试这样的事情。
import React from "react";
import { render } from "react-dom";
import Moment from "react-moment";
import moment from "moment";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 0,
date: new Date().toString()
};
}
handleChange(event) {
const { name, value } = event.target;
this.setState({ [name]: value }, () =>
console.log({ name, value, state: this.state })
);
}
render() {
return (
<div>
<Moment>{this.state.date}</Moment>;
<br />
<input
type="date"
className="form-control"
onChange={this.handleChange.bind(this)}
value={moment(this.state.date).format("YYYY-MM-DD")}
name="date"
id="date"
placeholder="Enter date"
required
/>
</div>
);
}
}
render(<App />, document.querySelector("#root"));