反应 Material-ui Select

Question

After i implemented my application, i wanted to style it with Material UI. When changing from html to Material i started recieving a warning when clicking select item:

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

Initial code:

<label htmlFor="newRole">Role</label>
        <select
          name="newRole"
          id="newRole"
          value={newUser.newRole}
          onChange={handleChangeNew}
        >
          <option value="0">Student</option>
          <option value="2">Professor</option>
          <option value="3">Secretary</option>
        </select>

Material UI code:

 <InputLabel shrink id="role-lbl"> Role </InputLabel>
            <Select
              labelId="role-lbl"
              name="newRole"
              id="newRole"
              value={newUser.newRole}
              onChange={handleChangeNew}
              // displayEmpty
              variant="filled"
            >
              <MenuItem value="0">Student</MenuItem>
              <MenuItem value="2">Professor</MenuItem>
              <MenuItem value="3">Secretary</MenuItem>
            </Select>

Answer 1

That is a little bit strange but I can not reproduce your warning. But as I faced it several times I can give you two advices how to fix it.

1. (not recommend) Just remove <React.StrictMode> wrapper on your <App />
2. useRefs . The idea might look like this:

import {InputLabel, MenuItem, Select} from "@material-ui/core";
import {useRef} from "react";

export default function Example3() {
    const nodeRef = useRef(null);
    
    function handleChangeNew(){
        console.log('changed');
    }

    return(
        <>
          <InputLabel shrink id="role-lbl"> Role </InputLabel>
            <Select
                noderef={nodeRef}
                labelId="role-lbl"
                id="newRole"
                value={newUser.newRole}
                onChange={handleChangeNew}
                // displayEmpty
                variant="filled"
            >
                <MenuItem value="0" ref={nodeRef}>Student</MenuItem>
                <MenuItem value="1" ref={nodeRef}>Professor</MenuItem>
                <MenuItem value="2" ref={nodeRef}>Secretary</MenuItem>
            </Select>
        </>
    )
}