在日期选择器中选择日期如何获取组件中的值
演示链接:https://material-ui.com/demos/pickers/
第一个例子
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200,
},
});
function DatePickers(props) {
const { classes } = props;
return (
<form className={classes.container} noValidate>
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
</form>
);
}
DatePickers.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(DatePickers);
提前致谢
答案 0 :(得分:2)
从这里参考api文档:https://material-ui.com/api/text-field/
export default class App extends PureComponent {
state = {
value: ""
};
render() {
const { value } = this.state;
return (
<div>
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
InputLabelProps={{
shrink: true
}}
onChange={event => {
this.setState({ value: event.target.value });
}}
/>
{value}
</div>
);
}
}
以及此处的示例:https://codesandbox.io/s/3rp5zl971
希望这会对你有所帮助