如何在组件中获取材质 ui 选择器值？答案

【问题标题】：How to get material ui pickers value in component?如何在组件中获取材质 ui 选择器值？
【发布时间】：2018-06-13 11:51:31
【问题描述】：

关于从日期选择器中选择日期如何获取组件中的值

演示链接：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);

提前致谢

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

请参考此处的 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

希望对你有帮助

【讨论】：