[英]Trying to get date value from a Material UI Textfield
我试图使用材料UI从两个文本域获取两个日期,以便提交到休息api并获得结果。 我在日期有一些问题,因为当我选择任何日期时,它进行“提交”,我只想在点击提交按钮时提交。
<form
onSubmit={this.formHandler(this.state.formFields)}
style={{ display: "inline-flex", padding: "15px" }}
>
<Grid item xs>
<TextField
id="from"
label="De"
type="date"
name="from"
//value={this.name}
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true
}}
formatDate={from => moment(from).format("DD-MM-YYYY")}
//onChange={handleChange1.bind(this)}
onChange={e => this.inputChangeHandler.call(this, e)}
value={this.state.formFields.from}
/>{" "}
</Grid>{" "}
<Grid item xs>
<TextField
id="date"
label="Até"
type="date"
name="to"
//value={this.target.value}
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true
}}
formatDate={date => moment(date).format("DD-MM-YYYY")}
onChange={e => this.inputChangeHandler.call(this, e)}
value={this.state.formFields.to}
/>{" "}
</Grid>{" "}
<Grid item xs>
<Button
type="submit"
variant="contained"
className={classes.button}
>
Submit{" "}
</Button>{" "}
</Grid>{" "}
</form>
inputChangeHandler(e) {
e.preventDefault();
let formFields = { ...this.state.formFields };
formFields[e.target.name] = e.target.value;
this.setState({
formFields
});
console.log(formFields.from);
console.log(formFields.to);
}
formHandler(formFields) {
axios
.post("/api/register", formFields)
.then(function(response) {
console.log(response);
//Perform action based on response
})
.catch(function(error) {
console.log(error);
//Perform action based on error
});
}
我该如何防止这种情况? 任何帮助,因为我认为我必须对其他3个组件做同样的事情,并可能会对我的应用程序产生负面影响吗?
这是因为您不应该将数据作为onSubmit函数的参数传递 :
onSubmit={this.formHandler(this.state.formFields)}
您可以访问formHandle中的状态,如React Form Documentation
所示。
将onSubmit更改为以下内容:
<form onSubmit={this.handleSubmit.bind(this)}>
然后在您的提交功能中,您可以访问您的州:
handleSubmit(event) {
event.preventDefault();
// access your state here
this.state.formFields
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.