Saya memiliki input yang akan dinonaktifkan secara default, tetapi dengan mengklik tombol saya ingin mengaktifkan dan memfokuskan input secara bersamaan.

Saya telah mencoba ini dalam fungsi yang sama, namun tampaknya tidak berfungsi di IDE/lingkungan reaksi lokal saya, dan membutuhkan mengklik tombol dua kali untuk melakukan ini sekali akan mengaktifkan input dan yang kedua akan fokus itu ... Ini sangat aneh bagiku

enter image description here

App.jsx

export const MyConstant = () => {
    const [isDisabled, setIsDisabled] = useState(true);
    const myInput = useRef();

    const enableAndFocus = () => {
        setIsDisabled(false);
        myInput.current.focus();
    }

    return (
        <button onClick={() => enableAndFocus()}>ClickMe</button>

        <input ref={myInput} disabled={isDisabled} />
    )
}

Berikut ini adalah stackblitz dari masalah ini

Saya tidak mengerti mengapa itu tidak akan melakukannya bersama-sama ... Apakah karena perubahan keadaan lebih lambat dari fokus?

0
physicsboy 28 Mei 2021, 13:55

3 jawaban

Jawaban Terbaik

setIsDisabled adalah fungsi asinkron sehingga ketika myInput.current.focus() dijalankan, input Anda masih dinonaktifkan.

Untuk memperbaikinya coba gunakan useEffect kait seperti di bawah ini: -

  useEffect(() => {
    if (!isDisabled) {
      myInput.current.focus();
    }
  }, [isDisabled]);
1
Priyank Kachhela 28 Mei 2021, 11:06

Anda dapat memiliki kait useEffect yang mendengarkan perubahan isDisabled dan kemudian Anda dapat fokus pada input di dalam kait jika isDisabled salah.

export const MyConstant = () => {
    const [isDisabled, setIsDisabled] = useState(true);
    const myInput = useRef();
    
    useEffect(() => {
        !isDisabled && myInput.current.focus();
    }, [isDisabled])

    const enableAndFocus = () => {
        setIsDisabled(false);
    }

    return (
        <button onClick={() => enableAndFocus()}>ClickMe</button>

        <input ref={myInput} disabled={isDisabled} />
    )
}
1
Prayag Choraria 28 Mei 2021, 11:07

Saya tidak bekerja dengan React, tetapi saya kira Anda dapat melakukan sedikit trik seperti ini, untuk memungkinkan React "mencerna" status yang diaktifkan sebelum memfokuskan input:

const enableAndFocus = async () => {
        setIsDisabled(false);
        await Promise.resolve();
        myInput.current.focus();
}
1
Jeremy Thille 28 Mei 2021, 11:02