Question

我正在编写一个带有选择字段的表格。我想在选择一个国家时在字段中看到该国家的名称。我不知道它是否被称为占位符。

这是组件：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { FormGroup } from '@material-ui/core';

import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';


function App(props) {

  const [values, setValues] = React.useState({
    ssn: '',
    phone: '',
    email: '',
    country: '',
    multiline: 'Controlled',
  });

  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

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



  return (

    <React.Fragment>
    <div>


        <FormGroup noValidate autoComplete="on">

          <TextField
            id=""
            label="Email"
            value={values.email}
            onChange={handleChange('email')}
            type="email"
            name='email'
          />


          <FormControl>
            <InputLabel htmlFor="country">Country</InputLabel>
            <Select
              label="Country"
              open={open}
              onClose={handleClose}
              onOpen={handleOpen}
              onChange={handleChange}
              inputProps={{
                name: 'country',
                id: 'country',
              }}
            >
              <MenuItem value="">
                <em>None</em>
              </MenuItem>
              <MenuItem value={10}>USA</MenuItem>
              <MenuItem value={20}>Uk</MenuItem>
              <MenuItem value={30}>UAE</MenuItem>
            </Select>
          </FormControl>

        </FormGroup>
    </div>

    </React.Fragment>

  );
}

export default App;

我想要选择一个国家/地区时，应该在字段中看到所选内容，但是目前，即使我选择一个国家/地区，该字段也不会显示。

任何人都可以让我知道如何解决此问题吗？

应在选择字段中选择“ React Material UI占位符”

0 个答案: