React js @ material-ui / core. Выбрать. Не удается прочитать свойство 'offsetWidth', равное нулю. - PullRequest
0 голосов
/ 23 февраля 2020

Я использую компонент Select на @material-ui/core, но у меня возникает следующая проблема:

Не удается прочитать свойство 'offsetWidth' из null

Вы можете мне помочь?

Ссылка: codesandbox

Код:

import React from "react";
import {
  Button,
  DialogTitle,
  Dialog,
  DialogContent,
  DialogActions,
  TextField,
  FormControl,
  InputLabel,
  MenuItem,
  Select
} from "@material-ui/core";

function AddUserModal(props) {
  const inputLabelTypeRole = React.useRef(null);
  const { open, onClose } = props;
  const [state, setState] = React.useState({
    labelWidthTypeRole: 0,
    name: ""
  });
  let { labelWidthTypeRole } = state;

  React.useEffect(() => {
    setState({
      ...state,
      labelWidthTypeRole: inputLabelTypeRole.current.offsetWidth
    });
  }, []);

  const onChange = name => ({ target: { value } }) => {
    setState({
      ...state,
      [name]: value
    });
  };

  const [currency, setCurrency] = React.useState(false);

  const handleChange = event => {
    setCurrency(event.target.value);
  };

  return (
    <Dialog
      fullWidth
      maxWidth="md"
      open={open}
      onClose={onClose}
      aria-labelledby="max-width-dialog-title"
    >
      <DialogTitle id="form-dialog-title" style={{ alignSelf: "center" }}>
        Add User
      </DialogTitle>
      <DialogContent>
        <div style={{ margin: 5 }}>
          <TextField
            margin="dense"
            id="name"
            label="Name"
            type="Name"
            fullWidth
            variant="outlined"
            onChange={onChange("name")}
          />
        </div>
        <div style={{ margin: 5 }}>
          <FormControl variant="outlined" fullWidth size="small">
            <InputLabel
              ref={inputLabelTypeRole}
              id="demo-simple-select-outlined-label"
            >
              Role
            </InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              labelWidth={labelWidthTypeRole}
              value={false}
            >
              <MenuItem value={false}>Report</MenuItem>
              <MenuItem value>Report Web hook</MenuItem>
            </Select>
          </FormControl>
        </div>

        <div style={{ margin: 5 }}>
          <TextField
            id="outlined-select-currency"
            select
            label="Select"
            helperText="Please select your currency"
            variant="outlined"
            fullWidth
            value={currency}
            onChange={handleChange}
          >
            <MenuItem value={false}>Report</MenuItem>
            <MenuItem value>Report Web hook</MenuItem>
          </TextField>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary" variant="contained">
          Create
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="App">
      <AddUserModal open={open} onClose={() => setOpen(false)} />
      <button onClick={() => setOpen(true)}>Open</button>
    </div>
  );
}

1 Ответ

0 голосов
/ 11 марта 2020

Ошибка решается очень просто: удалите «current» в перехватчике useEffect:

    React.useEffect(() => {
    setState({
      ...state,
      labelWidthTypeRole: inputLabelTypeRole.**current**.offsetWidth
    });
  }, []);

Поскольку в используемом примере есть несколько компонентов, но у вас есть один компонент, а «current» является излишним .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...