reactjs - React js日期在编辑模式下没有绑定
问题描述
我是反应 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"));