0

我是 Material UI 的新手。所以，这里我使用的是文本字段类型的日期。默认在文本字段中显示“dd-mm-yyyy”。但是，我想默认显示一个字符串值，比如“添加 DOB (MM/DD/YYYY)”。我尝试了一些方法，它不采用字符串值。请让我知道，我怎样才能做到这一点。

import React from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';


const App = () => (
  <div style={styles}>
    <TextField
                                id="date"
                                label="Add Date of Birth"
                                type="date"
                                name="DateOfBirth"
                                defaultValue="Add DOB"
                                className="form-field"
                                InputLabelProps={{
                                    shrink: true,
                               }}
                            />
  </div>
);

render(<App />, document.getElementById('root'));
4

1 回答 1

0

我不确定你问的是什么默认值。我在这里假设两件事：日期的默认值或日期附带的某种文本。

如果要为 TextField 设置默认值，最好为状态为 in 的组件设置 value 属性value={stateValue}。如果您想在日期旁边添加一些文本，您可以尝试在 Material UI 中输入装饰。

代码示例：

import React from "react";
import InputAdornment from "@material-ui/core/InputAdornment";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexDirection: "column",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200
  },
  adornment: {
    width: 110
  },
  dense: {
    marginTop: 19
  },
  menu: {
    width: 200
  }
}));

export default function TextFields() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    date: "1993-11-01"
  });

  const handleChange = name => event => {
    console.log(event.target.value);
    setValues({ ...values, [name]: event.target.value });
  };

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="date"
        label="Add Date of Birth"
        type="date"
        name="DateOfBirth"
        // defaultValue="Add DOB"
        InputProps={{
          startAdornment: (
            <InputAdornment className={classes.adornment} position="start">
              Add DOB
            </InputAdornment>
          )
        }}
        value={values.date}
        className={classes.textField}
        onChange={handleChange("date")}
        InputLabelProps={{
          shrink: true
        }}
      />

      <TextField
        id="standard-name"
        label="Date Text"
        className={classes.textField}
        value={values.date}
        onChange={handleChange("date")}
        margin="normal"
      />
    </form>
  );
}

演示 Codesandbox : TextField - 日期

于 2019-06-20T07:51:53.683 回答