reactjs - 单击按钮时如何使用 useRef Hook 关注 Material UI TextField？

Question

我有一个与 How to focus a Material UI Textfield on button click? 类似的问题但我无法用提供的答案解决问题。

这是代码。基本上，所有文本字段都被禁用。单击编辑配置文件按钮时，它将设置 disabled将帐户名称声明为 false我想专注于那个特定领域。我正在使用 useRef Hook 来引用该字段，但它不起作用。它只有在我单击该按钮两次时才会起作用。

import React, { useState, useEffect, useRef } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import PermContactCalendarIcon from "@material-ui/icons/PermContactCalendar";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(3),
    padding: theme.spacing(5),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(3),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
  fixedHeight: {
    height: 1000,
  },
  button: {
    marginTop: theme.spacing(3),
    marginRight: theme.spacing(3),
  },
}));

export default function AccountPage({ userdata }) {
  const classes = useStyles();

  const [accountName, setAccountName] = useState("");

  const [disabled, setDisabled] = useState(true);
  const inputRef = useRef(null);

  const handleOnChange = (e) => {
    if (e.target.name === "accountname") {
      setAccountName(e.target.value);
    }
  };

  return (
    <Container component="main">
      <CssBaseline />
      <Paper>
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <PermContactCalendarIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Account & User Settings
          </Typography>
          <form className={classes.form} noValidate>
            <Grid
              container
              direction="column"
              justify="center"
              alignItems="stretch"
              spacing={2}
            >
              <Grid item xs={12}>
                <Typography color="primary" display="inline" noWrap>
                  Account Name :
                </Typography>
              </Grid>
              <Grid item xs={12}>
                <TextField
                  name="accountname"
                  variant="outlined"
                  fullWidth
                  //   autoFocus
                  onChange={handleOnChange}
                  disabled={disabled}
                  value={accountName}
                  inputRef={inputRef}
                />
              </Grid>
              <Grid item xs={12}>
                <Typography color="primary" display="inline" noWrap>
                  E-mail Address :
                </Typography>
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  fullWidth
                  value={userdata.email}
                  type="email"
                  name="email"
                  disabled={true}
                  //   onChange={handleOnChange}
                />
              </Grid>
              <Grid item xs={12}>
                <Typography color="primary" display="inline" noWrap>
                  Account ID :
                </Typography>
              </Grid>
              <Grid item xs={12}>
                <TextField
                  variant="outlined"
                  fullWidth
                  name="id"
                  value={userdata._id}
                  type="text"
                  disabled={true}
                  //   onChange={handleOnChange}
                />
              </Grid>
            </Grid>
            <Button
              variant="contained"
              color="primary"
              className={(classes.submit, classes.button)}
              onClick={() => {
                setDisabled(false);
                inputRef.current.focus();
              }}
            >
              Edit Profile
            </Button>
            <Button
              //   type="submit"
              variant="contained"
              color="primary"
              className={(classes.submit, classes.button)}
              onClick={() => {
                setDisabled(true);
              }}
            >
              Save Changes
            </Button>
          </form>
        </div>
      </Paper>
    </Container>
  );
}

Answer 1

问题出在编辑按钮的 onClick 事件处理程序中:

() => {
  setDisabled(false);
  inputRef.current.focus();
};

您应该记住 setState是异步的。这是来自 React docs 的引述:

The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.

换句话说，React 向你 promise disabled将设置为 false将来的某个时候，但可能不会在 inputRef.current.focus() 行时被执行。

所以你想做的是问 React: when disabled设置为 false ，聚焦一个元素。这就是 useEffect钩子(Hook)是为了 - 它可以让你执行副作用。所以不要把 inputRef.current.focus()在 setDisabled(false) 之后，您可以设置 useEffect钩子(Hook)如下:

useEffect(() => {
  if (!disabled) {
    inputRef.current.focus();
  }
}, [disabled]); // Only run the function if disabled changes