TextField mui组件文本的autoFocus端

Question

现在，autoFocus适用于输入的开头，但我想将重点放在文本的末尾。

export default function BasicTextFields() {
  const [value, setValue] = React.useState(
    "hello world. hello world. hello world"
  );

  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 1, width: "25ch" }
      }}
      noValidate
      autoComplete="off"
    >
      <TextField
        id="outlined-basic"
        variant="outlined"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        multiline
        autoFocus
      />
    </Box>
  );
}

这个是可能的吗？

我试过这个链接：https://github.com/mui/material-ui/issues/12779，但这不适用于我的情况。

<TextField
    variant="outlined"
    type="text"
    id="field-comment"
    name="comment"
    label="Label"
    placeholder="Placeholder"
    onChange={(event) => setValue(event.target.value)}
    inputRef={(input) => input && input.focus()}
    onFocus={(e) =>
        e.currentTarget.setSelectionRange(
        e.currentTarget.value.length,
        e.currentTarget.value.length
    )}
    multiline
    rows={4}
    value={value}
    className={classes.sCommentTextField}
/>

我也试过这个。

<TextField
  inputRef={input => input && input.focus()}
/>

但也没用。

我有什么办法可以做到吗？

Answer 1

这行得通！

<TextField
    variant="outlined"
    type="text"
    id="field-comment"
    name="comment"
    label="Label"
    placeholder="Placeholder"
    onChange={(event) => setValue(event.target.value)}
    inputRef={(input) => input && input.focus()}
    onFocus={(e) =>
        e.currentTarget.setSelectionRange(
        e.currentTarget.value.length,
        e.currentTarget.value.length
    )}
    multiline
    rows={4}
    value={value}
    className={classes.sCommentTextField}
/>

删除autoFocus并添加inputRef和onFocus