Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan fokus dalam tindak balas
Bagaimana untuk menetapkan fokus dalam tindak balas
- 藏色散人asal
- 2022-12-27 11:18:382210semak imbas
Cara menetapkan fokus dalam tindak balas: 1. Gunakan elemen DOM dalam componentDidMount; 2. Panggil API DOM "this.input.focus()" untuk memfokus secara automatik pada input apabila halaman dimuatkan fungsi.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Bagaimana untuk menetapkan fokus dalam tindak balas?
React secara automatik memfokus pada kotak input selepas memasuki halaman
Dalam React.js, pada dasarnya anda tidak perlu berurusan dengan DOM secara langsung. React.js menyediakan satu siri kaedah on* untuk membantu kami memantau acara, jadi tidak perlu memanggil terus API DOM addEventListener dalam React.js pada masa lalu, kami mengemas kini halaman melalui operasi DOM manual (contohnya, dengan bantuan jQuery), tetapi dalam React Dalam js, komponen boleh dipaparkan semula secara langsung melalui setState Apabila membuat, prop baharu boleh dihantar ke sub-komponen untuk mencapai kesan kemas kini halaman.
Mekanisme pemaparan semula React.js membantu kami mengelakkan kebanyakan operasi kemas kini DOM, dan juga membenarkan perpustakaan pihak ketiga seperti jQuery, yang kebanyakannya merangkumi operasi DOM, untuk digunakan sebagai alat pembangunan kami rantai.
Tetapi React.js tidak dapat memenuhi sepenuhnya semua keperluan operasi DOM Kadangkala kita masih perlu berurusan dengan DOM. Contohnya, jika anda ingin memfokus secara automatik pada kotak input selepas memasuki halaman, anda perlu memanggil API DOM input.focus(). Contohnya, jika anda ingin mendapatkan saiz elemen DOM secara dinamik untuk animasi berikutnya , dsb.
React.js menyediakan atribut ref untuk membantu kami mendapatkan nod DOM bagi elemen yang dipasang Anda boleh menambahkan atribut ref pada elemen JSX.
Anda dapat melihat bahawa kami menambahkan atribut ref pada elemen input dan nilai atribut ini ialah fungsi. Apabila elemen input dipasang pada halaman, React.js akan memanggil fungsi ini dan menghantar nod DOM yang dipasang kepada fungsi ini. Dalam fungsi, kami menetapkan elemen DOM ini sebagai atribut contoh komponen, supaya kami boleh mendapatkan elemen DOM ini melalui this.input pada masa hadapan.
Kemudian kita boleh menggunakan elemen DOM ini dalam componentDidMount dan memanggil API DOM this.input.focus(). Secara keseluruhannya, ia mencapai fungsi memfokus secara automatik pada kotak input selepas halaman dimuatkan (anda dapat melihat bahawa kami menggunakan kitaran hayat komponen componentDidMount).
Kami boleh menambah rujukan pada mana-mana teg elemen HTML untuk mendapatkan elemen DOMnya dan kemudian memanggil API DOM. Tetapi ingat satu prinsip: jangan gunakan rujukan jika anda boleh. Khususnya, elakkan menggunakan ref untuk operasi kemas kini halaman automatik dan pemantauan acara yang React.js boleh bantu anda lakukan. Operasi DOM berlebihan sebenarnya adalah "bising" dalam kod, yang tidak kondusif untuk pemahaman dan penyelenggaraan kami.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
componentDidMount () {
this.input.focus()
}
render () {
return (
<input ref={(input) => this.input = input} />
)
}
}
ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
);
</script>
</body>
</html>Cara penulisan lain:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面以后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);
</script>
</body>
</html>Pembelajaran yang disyorkan: "tutorial video bertindak balas"
Atas ialah kandungan terperinci Bagaimana untuk menetapkan fokus dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!