javascript - 在材质 ui 文本字段中聚焦输入需要延迟

问题描述

我无法在inputRef.current.focus()不使用setTimeout. 这似乎是一个错误，但我不确定它是在 React 还是 MaterialUI 中。

在此处查看演示： https ://codesandbox.io/s/goofy-gareth-lkmq3?file=/src/App.js

export default function App() {
  const inputRef = useRef();

  const [value, setValue] = useState("but focus only works after a timeout");
  const [disabled, setDisabled] = useState(true);

  const onChange = useCallback(
    (e) => {
      setValue(e.target.value);
    },
    [setValue]
  );

  const onClickIcon = useCallback(() => {
    console.log("onClickIcon");
    setDisabled(false);

    // this does nothing
    inputRef.current.focus();

    // eventually you'll see the input gain focus
    setTimeout(() => {
      inputRef.current.focus();
    }, 2000);
  }, [inputRef]);

  const onFocus = useCallback(() => {
    console.log("onFocus");
  }, []);

  const onBlur = useCallback(() => {
    console.log("onBlur");
    setDisabled(true);
  }, [setDisabled]);

  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          ISSUE: Button click does not immediately focus input
        </Typography>
      </Box>
      <Grid container direction="row" wrap="nowrap">
        <TextField
          fullWidth
          disabled={disabled}
          label="input should become focused when LOCK is clicked"
          inputRef={inputRef}
          value={value}
          onChange={onChange}
          onFocus={onFocus}
          onBlur={onBlur}
          color="primary"
        />
        <IconButton onClick={onClickIcon} color="primary">
          <LockIcon />
        </IconButton>
      </Grid>
      <Box my={4}>
        <ProTip />
      </Box>
    </Container>
  );
}

package.json

{
  "name": "create-react-app",
  "version": "4.0.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "@material-ui/core": "latest",
    "@material-ui/icons": "4.11.2",
    "clsx": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest"
  }
}

标签： javascriptreactjsmaterial-ui

javascript - 在材质 ui 文本字段中聚焦输入需要延迟

问题描述

解决方案

推荐阅读