Настройка значения по умолчанию в текстовом поле Дата | Реагировать Материал - PullRequest
Новая
       16

Настройка значения по умолчанию в текстовом поле Дата | Реагировать Материал

0 голосов
/ 19 июня 2019

Я новичок в интерфейсе материалов.Итак, здесь я использую текстовое поле типа Дата.По умолчанию в текстовом поле отображается «дд-мм-гггг».Но я хочу показать строковое значение по умолчанию, например, «Добавить 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'));

1 Ответ

0 голосов
/ 20 июня 2019

Я не уверен, что по умолчанию вы спрашиваете.Я предполагаю две вещи здесь: значение по умолчанию для даты или какой-либо текст, сопровождающий дату.

Если вы хотите установить значение по умолчанию для TextField, лучше всего установить значение prop для компонента ссостояние как в value={stateValue}.Если вы хотите добавить текст, сопровождающий дату, вы можете попробовать Ввод украшений в интерфейсе материалов.

Пример кода для этого: 

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>
  );
}

Демо-коды andbox : TextField - дата

...