自动聚焦在第一个空 TextField Mui 上

Question

我试图在字段为空时实现自动对焦功能.. 但在这种情况下自动对焦总是有效

<Controller
                      name="sum"
                      control={control}
                      render={({ field: { value, onChange } }) => (
                        <TextField
                          value={money || value}
                          onChange={onChange}
                          error={!!errors?.sum}
                          autoFocus={!value}
                          helperText={errors?.sum && errors.sum?.message}
                          InputProps={{
                            placeholder: 'Например, 100 000 000',
                            endAdornment: (
                              <InputAdornment position="end">
                                <SvgRoubleIcon />
                              </InputAdornment>
                            ),
                            inputComponent: CurrencyInput,
                          }}
               
                        />
                      )}
                    />

Answer 1

你尝试过这样使用吗

import React from "react";
import ReactDOM from "react-dom";
import { useForm, Controller } from "react-hook-form";
import { TextField } from "@material-ui/core";
import NumberFormat from "react-number-format";

import "./index.css";

function App() {
  const ref = React.createRef(null);
  const defaultValues = {
    firstName: '',
  };
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm({defaultValues});

  const onSubmit = (data) => {
    console.log(data);
  };
  React.useEffect(() => {
    console.log(ref)
  })

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="firstName"
          control={control}
          rules={{ required: true }}
          render={({ field: { value, ref, ...field } }) => {
            console.log(field,value)
            return <TextField
              {...field}
              inputRef={ref}
              value={value}
              id="firstName"
              autoComplete="fname"
              variant="outlined"
              fullWidth
              autoFocus={!value}
              error={!!errors.firstName}
              label="First Name"
          />
          }}
        />
        <input type="submit" />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现场示例是真实示例

Answer 2

使用

autoFocus

属性的一个问题是，由于使用 npm run dev 时的行为不同，因此开发起来很麻烦。我一直无法让这种方法正常工作。然而，使用裁判效果很好：

import { useEffect, useRef, useState } from 'react';

export default function Index() {
  const [fieldOne, setFieldOne] = useState(fieldOneInitialValue)
  const [fieldTwo, setFieldTwo] = useState('')

  const fieldOneRef = useRef(null);
  const fieldTwoRef = useRef(null);

  useEffect(() => {
    if (fieldOne.length > 0) {
      fieldTwoRef.current.focus();
    } else {
      fieldOneRef.current.focus();
    }
  }, []);

  return (
    <>
      <TextField
        value={fieldOne}
        inputRef={fieldOneRef}
        label="Field 1"
        InputLabelProps={{ shrink: true }}
        onChange={(e) => setFieldOne(e.target.value)} />
      <TextField
        value={fieldTwo}
        inputRef={fieldTwoRef}
        label="Field 2"
        onChange={(e) => setFieldTwo(e.target.value)} />
    </>
  )  
}