উপাদানটি রেন্ডার হওয়ার পরে কোনও নির্দিষ্ট পাঠ্য ক্ষেত্রে ফোকাস সেট করার প্রতিক্রিয়া কী?
ডকুমেন্টেশন মনে হয় রেফ ব্যবহার করে যেমন:
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=...নোট করুন যে জেএসএক্সে এটি autoFocus(মূলধন এফ) প্লেইন পুরাতন এইচটিএমএল থেকে পৃথক যা কেস-সংবেদনশীল।
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()
}বেশিরভাগ ক্ষেত্রে, আপনি ডোম নোডের সাথে একটি সংযুক্তি সংযোজন করতে পারেন এবং ফাইন্ডোমনোড ব্যবহার করা এড়াতে পারেন।
এপিআই ডকুমেন্টগুলি এখানে পড়ুন: 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 প্রতিক্রিয়া ব্যবহার করছি এবং আমি ES6 সিনট্যাক্সটি ব্যবহার করছি এবং অন্যান্য উত্তরগুলি থেকে আমার যা প্রয়োজন তা বেশিরভাগই পাইনি যেহেতু সপ্তাহের আগে 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মাউন্টে চলার দরকার ছিল না , একটি মান প্রবেশ করার সময় কেবল উপাদানটির দিকে মনোনিবেশ করার জন্য সন্ধান করছিলাম । এটি সেই দৃশ্যের জন্য পুরোপুরি কাজ করেছিল worked (প্রতিক্রিয়া 15 ব্যবহার করে)
এটি আর সেরা উত্তর হয় না। V0.13 হিসাবে , কিছু অদ্ভুত ক্ষেত্রে আফটার চালানো this.refsনা হওয়া পর্যন্ত উপলভ্য হতে পারে 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...। এটি সম্পর্কে এখানে আরও পড়ুন: ফেসবুক.
এটি সঠিক উপায়, কীভাবে অটোফোকাস করা যায়। আপনি যখন রেফার মান হিসাবে স্ট্রিংয়ের পরিবর্তে কলব্যাক ব্যবহার করেন, তখন এটি স্বয়ংক্রিয়ভাবে কল হয়। DOM ব্যবহার না করে ব্যবহারের চেয়ে আপনার রেফ পাওয়া গেলgetDOMNode
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},মনে রাখবেন যে এই উত্তরগুলির কোনওটিই আমার জন্য কোনও উপাদান-ইউআই টেক্সটফিল্ড উপাদান দিয়ে কাজ করে নি । প্রতি কিভাবে সেট ফোকাস করার জন্য একটি materialUI পাঠ্যক্ষেত্র কিভাবে? এটির কাজ পেতে আমাকে কিছু হুপ করে যেতে হয়েছিল:
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);focus()জন্য অ্যানিমেশন শেষ হওয়া পর্যন্ত বিলম্ব হতে হবে।
তোমার দরকার নেই getInputDOMNode?? এক্ষেত্রে...
উপাদানটি মাউন্ট হয়ে গেলে কেবল তা পান refএবং focus()এটি তৈরি করুন - घटकডিডমাউন্ট ...
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-foc-at-the-end-of-an-input-with-react-js
সতর্কতা: রিঅ্যাক্টডোম কম্পোনেন্ট: কোনও ডিওএম নোডের .getDOMNode () অ্যাক্সেস করবেন না; পরিবর্তে, সরাসরি নোড ব্যবহার করুন। এই ডোম নোড দ্বারা রেন্ডার করা হয়েছিল
App।
হতে হবে
componentDidMount: function () {
this.refs.nameInput.focus();
}সহজ উত্তরটি হ'ল ইনপুট পাঠ্য উপাদানটিতে রেফ = "কিছু নাম" যুক্ত করুন এবং নীচের ফাংশনটি কল করুন।
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
আপনার পাঠ্য ইনপুট রেফ সেট করুন
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.
/>একবার আমি অক্ষম প্রপ অপসারণ করি আবার সবকিছু কাজ শুরু করে।
আপডেট করা সংস্করণ আপনি এখানে চেক করতে পারেন
componentDidMount() {
// Focus to the input as html5 autofocus
this.inputRef.focus();
}
render() {
return <input type="text" ref={(input) => { this.inputRef = input }} />
})যেহেতু এই ত্রুটির অনেক কারণ রয়েছে বলে আমি ভেবেছিলাম যে আমি যে সমস্যার মুখোমুখি হচ্ছি তাও পোস্ট করব। আমার জন্য, সমস্যাটি ছিল যে আমি আমার ইনপুটগুলিকে অন্য উপাদানগুলির সামগ্রী হিসাবে রেন্ডার করি।
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()