如何将文本输入集中在过渡端？答案

【问题标题】：How to focus text input on transition end?如何将文本输入集中在过渡端？
【发布时间】：2021-05-05 15:21:36
【问题描述】：

如果 Mui Collapsible 已扩展，我想显示一个聚焦的文本输入。自动对焦属性不起作用。有没有实现焦点？

    <Collapse in={checked}>
        <input autofocus type="text" />
    </Collapse>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以为输入元素分配一个引用，并根据checked 的值使其聚焦在useEffect 中。 Sandbox

export default function SimpleCollapse() {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(false);
  const textInput = React.useRef(null);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };
  React.useEffect(() => {
    if (checked) {
      textInput.current.focus();
    }
  }, [checked]);

  return (
    <div className={classes.root}>
      <FormControlLabel
        control={<Switch checked={checked} onChange={handleChange} />}
        label="Show"
      />
      <div className={classes.container}>
        <Collapse in={checked}>
          <Paper elevation={4} className={classes.paper}>
            <input ref={textInput} type="text" />
          </Paper>
        </Collapse>
      </div>
    </div>
  );
}

【讨论】：