घटक के प्रतिपादन के बाद किसी विशेष पाठ क्षेत्र पर ध्यान केंद्रित करने का प्रतिक्रिया तरीका क्या है?
प्रलेखन का उपयोग करने के लिए रेफरी का सुझाव लगता है, जैसे:
ref="nameInput"रेंडर फ़ंक्शन में मेरे इनपुट फ़ील्ड पर सेट करें , और फिर कॉल करें:
this.refs.nameInput.getInputDOMNode().focus(); लेकिन मैं इसे कहां बुलाऊं? मैंने कुछ स्थानों की कोशिश की है, लेकिन मैं इसे काम नहीं कर सकता।
जवाबों:
आपको इसे componentDidMountऔर refs callbackइसके बजाय करना चाहिए । कुछ इस तरह
componentDidMount(){
this.nameInput.focus();
}class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue="Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div><input>। कुछ इस तरह<input ref={ (component) => ReactDOM.findDOMNode(component).focus() } />
@ धीरज का जवाब सही है, और सुविधा के लिए आप ऑटोफोकस प्रोप का उपयोग कर सकते हैं जब एक इनपुट स्वचालित रूप से ध्यान केंद्रित किया हो जब घुड़सवार:
<input autoFocus name=...ध्यान दें कि jsx में यह autoFocus(राजधानी एफ) सादे पुराने html के विपरीत है जो केस-असंवेदनशील है।
autofocusविशेषता का उपयोग नहीं करता है , यह वास्तव में डोम माउंट पर उपयोग करता focus()हैreact-dom इसलिए यह काफी विश्वसनीय है।
0.15 अभिक्रिया के अनुसार , सबसे संक्षिप्त विधि है:
<input ref={input => input && input.focus()}/>यदि आप केवल एक तत्व पर ध्यान केंद्रित करना चाहते हैं जब वह आरोहित करता है (शुरू में प्रतिपादन) ऑटोफोकस विशेषता का एक सरल उपयोग करेगा।
<input type="text" autoFocus />नियंत्रण को गतिशील रूप से नियंत्रित करने के लिए अपने घटकों से कार्यान्वयन विवरण छिपाने के लिए एक सामान्य फ़ंक्शन का उपयोग करें।
const FocusDemo = () => {
const [inputRef, setInputFocus] = useFocus()
return (
<>
<button onClick={setInputFocus} >
FOCUS
</button>
<input ref={inputRef} />
</>
)
}
const useFocus = () => {
const htmlElRef = useRef(null)
const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()}
return [ htmlElRef, setFocus ]
}class App extends Component {
constructor(props){
super(props)
this.inputFocus = utilizeFocus()
}
render(){
return (
<>
<button onClick={this.inputFocus.setFocus}>
FOCUS
</button>
<input ref={this.inputFocus.ref}/>
</>
)
}
}const utilizeFocus = () => {
const ref = React.createRef()
const setFocus = () => {ref.current && ref.current.focus()}
return {setFocus, ref}
}(htmlElRef.current as any).focus()और (2) return {htmlElRef, setFocus}सरणी के बजाय।
useFocusएक से अधिक तत्वों के लिए उपयोग करना चाहते हैं ।
useFocusटाइपस्क्रिप्ट लिखा हुआ है। gist.github.com/carpben/de968e377cbac0ffbdefe1ab56237573
as constआपके पास है), बहुत शैक्षिक!
setदूसरी स्थिति में रखने के लिए बेहतर हो सकता है const [inputRef, setInputFocus] = useFocus()। यह मैच अधिक उपयोग करता है। पहले ऑब्जेक्ट, फिर उस ऑब्जेक्ट का सेटर
यदि आप सिर्फ रिएक्ट में ऑटोफोकस बनाना चाहते हैं, तो यह आसान है।
<input autoFocus type="text" />यदि आप सिर्फ यह जानना चाहते हैं कि उस कोड को कहां रखा जाए, तो इसका जवाब घटकवार्डमाउंट () में है।
v014.3
componentDidMount() {
this.refs.linkInput.focus()
}ज्यादातर मामलों में, आप DOM नोड में एक रेफरी संलग्न कर सकते हैं और findDOMNode का उपयोग करने से बिल्कुल भी बच सकते हैं।
यहां एपीआई दस्तावेज़ पढ़ें: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode
F! (स्वयं और दूसरों को नोट करें, उत्तर देने वाले को नहीं)।
प्रतिक्रिया 16.3 ने घटक के निर्माता में एक रेफरी बनाकर इसे संभालने के लिए एक नया सुविधाजनक तरीका जोड़ा और इसे नीचे की तरह उपयोग करें:
class MyForm extends Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focus(); // one important change here is that we need to access the element via current.
}
render() {
// instead of using arrow function, the created ref can be used directly.
return(
<div>
<input ref={this.textInput} />
</div>
);
}
}अधिक जानकारी के लिए, आप इस लेख को रिएक्ट ब्लॉग में देख सकते हैं ।
अपडेट करें:
रिएक्ट 16.8 से शुरू होकर , useRefहुक का उपयोग एक ही परिणाम प्राप्त करने के लिए फ़ंक्शन घटकों में किया जा सकता है:
import React, { useEffect, useRef } from 'react';
const MyForm = () => {
const textInput = useRef(null);
useEffect(() => {
textInput.current.focus();
}, []);
return (
<div>
<input ref={textInput} />
</div>
);
};मैं बस इस मुद्दे में भाग गया और मैं 15.0.1 15.0.2 प्रतिक्रिया का उपयोग कर रहा हूं और मैं ईएस 6 सिंटैक्स का उपयोग कर रहा हूं और काफी कुछ नहीं मिला है जो मुझे दूसरे उत्तरों से चाहिए था क्योंकि v.15 सप्ताह पहले गिरा था और कुछ this.refsगुणों में से हटाए गए और हटा दिए गए ।
सामान्य तौर पर, मुझे जो चाहिए था:
मैं उपयोग कर रहा हूँ:
मैंने autoFocus={true}पहले प्रयोग किया<input /> पृष्ठ पर ताकि जब घटक की गणना हो, तो उसे फोकस मिलेगा।
इसमें अधिक समय लगा और इसे अधिक जटिल बना दिया गया। मैं कोड रख रहा हूं जो संक्षिप्तता के समाधान के लिए प्रासंगिक नहीं है।
मुझे यह जानने के लिए एक वैश्विक स्थिति की आवश्यकता है कि क्या मुझे फ़ोकस सेट करना चाहिए और इसे सेट होने पर अक्षम करना है, इसलिए मैं पुन: सेटिंग फ़ोकस तब नहीं रखता जब घटक पुन: रेंडर करते हैं (मैं componentDidUpdate()फ़ोकस सेट करने के लिए जाँच करने के लिए उपयोग करूँगा । )
यह डिज़ाइन किया जा सकता है क्योंकि आप आवेदन के लिए उपयुक्त हैं।
{
form: {
resetFocus: false,
}
}घटक को resetfocusप्रॉपर्टी को सेट करने के लिए प्रॉपर्टी सेट और कॉलबैक की आवश्यकता होगी , यदि यह सेट अप को खुद पर फोकस करता है।
यह भी ध्यान दें, मैंने अपने एक्शन क्रिएटर्स को अलग-अलग फाइलों में व्यवस्थित किया है, क्योंकि मेरी परियोजना काफी बड़ी है और मैं उन्हें अधिक प्रबंधनीय विखंडू में तोड़ना चाहता था।
import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';
function mapStateToProps(state) {
return {
resetFocus: state.form.resetFocus
}
}
function mapDispatchToProps(dispatch) {
return {
clearResetFocus() {
dispatch(ActionCreator.clearResetFocus());
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MyField);import React, { PropTypes } form 'react';
export default class MyField extends React.Component {
// don't forget to .bind(this)
constructor(props) {
super(props);
this._handleRef = this._handleRef.bind(this);
}
// This is not called on the initial render so
// this._input will be set before this get called
componentDidUpdate() {
if(!this.props.resetFocus) {
return false;
}
if(this.shouldfocus()) {
this._input.focus();
this.props.clearResetFocus();
}
}
// When the component mounts, it will save a
// reference to itself as _input, which we'll
// be able to call in subsequent componentDidUpdate()
// calls if we need to set focus.
_handleRef(c) {
this._input = c;
}
// Whatever logic you need to determine if this
// component should get focus
shouldFocus() {
// ...
}
// pass the _handleRef callback so we can access
// a reference of this element in other component methods
render() {
return (
<input ref={this._handleRef} type="text" />
);
}
}
Myfield.propTypes = {
clearResetFocus: PropTypes.func,
resetFocus: PropTypes.bool
}सामान्य विचार यह है कि प्रत्येक प्रपत्र फ़ील्ड में त्रुटि हो सकती है और उसे स्वयं जांचने की आवश्यकता होती है और यदि उसे स्वयं पर ध्यान केंद्रित करने की आवश्यकता होती है।
व्यापार तर्क है कि यह निर्धारित करने के लिए होने की जरूरत है कि क्या दिए गए क्षेत्र पर ध्यान केंद्रित करने के लिए सही क्षेत्र है। यह नहीं दिखाया गया है क्योंकि यह व्यक्तिगत अनुप्रयोग पर निर्भर करेगा।
जब कोई प्रपत्र सबमिट किया जाता है, तो उस घटना को वैश्विक फ़ोकस ध्वज resetFocusको सही पर सेट करने की आवश्यकता होती है। फिर जैसा कि प्रत्येक घटक स्वयं को अपडेट करता है, यह देखेगा कि उसे यह देखने के लिए जांचना चाहिए कि क्या उसे फ़ोकस मिलता है और यदि ऐसा होता है, तो ईवेंट को फ़ोकस रीसेट करने के लिए भेजें ताकि अन्य तत्वों को जाँचते न रहना पड़े।
एक साइड नोट के रूप में संपादित करें , मेरे पास "उपयोगिताओं" फ़ाइल में मेरा व्यावसायिक तर्क था और मैंने सिर्फ विधि का निर्यात किया और इसे प्रत्येक के भीतर बुलायाshouldfocus() विधि।
चीयर्स!
रिएक्ट डॉक्स में अब इसके लिए एक सेक्शन है। https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},autofocusमाउंट करने की आवश्यकता नहीं थी , बस एक मूल्य दर्ज करते समय ध्यान केंद्रित रहने के लिए तत्व की तलाश थी। यह उस परिदृश्य के लिए पूरी तरह से काम करता है। (प्रतिक्रिया 15 का उपयोग करते हुए)
यह अब सबसे अच्छा जवाब नहीं है। V0.13 के अनुसार, कुछ विषम मामलों में this.refsAFTER के componentDidMount()चलने तक उपलब्ध नहीं हो सकता है ।
केवल autoFocusअपने इनपुट फ़ील्ड में टैग जोड़ें , जैसा कि FakeRainBrigand ऊपर दिखाया गया है।
<input autofocus>क्षेत्र अच्छा व्यवहार नहीं करेंगे
<input>रेंडर के बाद फोकस सेट करने के बारे में था
संदर्भ। @ धीरज के जवाब पर दवे की टिप्पणी; एक विकल्प का प्रतिपादन तत्व पर रेंडर विशेषता की कॉलबैक कार्यक्षमता का उपयोग करने के लिए किया जाता है (एक घटक पहले रेंडर के बाद):
<input ref={ function(component){ React.findDOMNode(component).focus();} } />Uncaught TypeError: Cannot read property 'focus' of null
component && React.findDomNode...। इसके बारे में यहाँ और पढ़ें: facebook.github.io/react/docs/…
यह उचित तरीका है, ऑटोफोकस कैसे करें। जब आप रिफ़ मान के रूप में स्ट्रिंग के बजाय कॉलबैक का उपयोग करते हैं, तो इसे स्वचालित रूप से कहा जाता है। DOM का उपयोग करने की आवश्यकता के बिना आपको अपना रेफरल उपलब्ध हुआgetDOMNode
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},ध्यान दें कि इनमें से किसी भी उत्तर ने मेरे लिए सामग्री-यूई टेक्स्टफिल्ड घटक के साथ काम नहीं किया । प्रति कैसे सेट फोकस करने के लिए एक materialUI TextField के लिए? मुझे यह काम करने के लिए कुछ हुप्स के माध्यम से कूदना पड़ा:
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);focus()तो एनीमेशन खत्म होने तक देरी से कॉल करना होगा।
आप रेंडर फंक्शन के अंदर उस मेथड कॉल को डाल सकते हैं। या जीवन चक्र विधि के अंदर,componentDidUpdate
आप की जरूरत नहीं है getInputDOMNode ?? इस मामले में...
बस मिलता है refऔर focus()यह जब घटक बढ़ जाता है - ComponentsDidMount ...
import React from 'react';
import { render } from 'react-dom';
class myApp extends React.Component {
componentDidMount() {
this.nameInput.focus();
}
render() {
return(
<div>
<input ref={input => { this.nameInput = input; }} />
</div>
);
}
}
ReactDOM.render(<myApp />, document.getElementById('root'));ऑटोफोकस ने मेरे लिए सबसे अच्छा काम किया। मुझे डबल क्लिक पर उस पाठ के साथ कुछ पाठ को इनपुट में बदलने की आवश्यकता थी, इसलिए मैंने इसे समाप्त किया:
<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />नोट: समस्या को ठीक करने के लिए जहां रिएक्ट टेक्स्ट की शुरुआत में कैरेट को रखता है, इस विधि का उपयोग करें:
setCaretToEnd(event) {
var originalText = event.target.value;
event.target.value = '';
event.target.value = originalText;
}यहाँ पाया गया: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js
चेतावनी: ReactDOMComponent: एक DOM नोड का .getDOMNode () एक्सेस न करें; इसके बजाय, नोड का सीधे उपयोग करें। यह DOM नोड द्वारा प्रस्तुत किया गया था
App।
होना चाहिए
componentDidMount: function () {
this.refs.nameInput.focus();
}सबसे सरल उत्तर इनपुट पाठ तत्व में Ref = "कुछ नाम" जोड़कर नीचे दिए गए फ़ंक्शन को कॉल करें।
componentDidMount(){
this.refs.field_name.focus();
}
// here field_name is ref name.
<input type="text" ref="field_name" />एक नए बनाए गए तत्व पर ध्यान केंद्रित करने के लिए, आप राज्य में तत्व की आईडी को स्टोर कर सकते हैं और इसे सेट करने के लिए उपयोग कर सकते हैं autoFocus। जैसे
export default class DefaultRolesPage extends React.Component {
addRole = ev => {
ev.preventDefault();
const roleKey = this.roleKey++;
this::updateState({
focus: {$set: roleKey},
formData: {
roles: {
$push: [{
id: null,
name: '',
permissions: new Set(),
key: roleKey,
}]
}
}
})
}
render() {
const {formData} = this.state;
return (
<GridForm onSubmit={this.submit}>
{formData.roles.map((role, idx) => (
<GridSection key={role.key}>
<GridRow>
<GridCol>
<label>Role</label>
<TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
</GridCol>
</GridRow>
</GridSection>
))}
</GridForm>
)
}
}इस तरह से किसी भी टेक्स्टबॉक्स को पेज लोड (जैसे मैं चाहता हूं) पर फोकस नहीं मिलता है, लेकिन जब आप एक नया रिकॉर्ड बनाने के लिए "एड" बटन दबाते हैं, तो उस नए रिकॉर्ड पर फोकस हो जाता है।
चूंकि autoFocusघटक फिर से "रन" नहीं करता है, जब तक कि घटक को रिमूव नहीं किया जाता है, मुझे परेशान करने की ज़रूरत नहीं है this.state.focus(अर्थात जब मैं अन्य राज्यों को अपडेट करता हूं तो यह वापस फोकस चोरी नहीं करेगा)।
लगभग सभी जवाब पढ़ें, लेकिन एक नहीं देखा getRenderedComponent().props.input
अपना टेक्स्ट इनपुट Refs सेट करें
this.refs.username.getRenderedComponent().props.input.onChange('');
बिना किसी सफलता के ऊपर दिए गए बहुत सारे विकल्पों की कोशिश करने के बाद मैंने पाया है कि जैसा मैं था वैसा ही था disablingऔर फिर enablingइनपुट जिसके कारण फोकस खो गया।
मेरे पास एक प्रोप था sendingAnswerजो बैकएंड को पोलिंग करते समय इनपुट को डिसेबल कर देता था।
<Input
autoFocus={question}
placeholder={
gettingQuestion ? 'Loading...' : 'Type your answer here...'
}
value={answer}
onChange={event => dispatch(updateAnswer(event.target.value))}
type="text"
autocomplete="off"
name="answer"
// disabled={sendingAnswer} <-- Causing focus to be lost.
/>एक बार जब मैंने विकलांगों को हटा दिया तो सब कुछ फिर से काम करने लगा।
चूंकि इस त्रुटि के कई कारण हैं, इसलिए मैंने सोचा था कि मैं जिस समस्या का सामना कर रहा हूं उसे भी पोस्ट करूंगा। मेरे लिए, समस्या यह थी कि मैंने अपने इनपुट को दूसरे घटक की सामग्री के रूप में प्रस्तुत किया।
export default ({ Content }) => {
return (
<div className="container-fluid main_container">
<div className="row">
<div className="col-sm-12 h-100">
<Content /> // I rendered my inputs here
</div>
</div>
</div>
);
}यह वह तरीका है जिसे मैंने उपरोक्त घटक कहा है:
<Component Content={() => {
return (
<input type="text"/>
);
}} />अपडेट किए गए सिंटैक्स के अनुसार, आप उपयोग कर सकते हैं this.myRref.current.focus()