렌더링 후 입력 필드에 포커스를 설정하는 방법
컴포넌트가 렌더링된 후 특정 텍스트 필드에 포커스를 설정하는 반응 방식은 무엇입니까?
문서에서는 참조를 사용하는 것을 권장하는 것으로 보인다.
★★ref="nameInput"[렌더 기능]의 [입력]필드에 있는 다음 호출합니다.
this.refs.nameInput.getInputDOMNode().focus();
근데 이걸 어디다 불러야 되지?몇 군데 시도해 봤지만 작동이 안 돼요.
@Dhiraj의 답변은 정확합니다.또한 편의상 autoFocus 프로포스를 사용하면 마운트 시 자동으로 입력에 초점을 맞출 수 있습니다.
<input autoFocus name=...
jsx라고 .autoFocus(대소문자 F) 대소문자를 구분하지 않는 일반 오래된 html과는 다릅니다.
하면 .componentDidMount그 대신.뭐 이런 거
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>마운트에 집중
요소가 마운트(초기 렌더링)될 때에만 포커스를 맞추고 싶다면 autoFocus 속성을 간단히 사용하면 됩니다.
<input type="text" autoFocus />
동적 포커스
포커스를 동적으로 제어하려면 일반 함수를 사용하여 구성 요소에서 구현 세부 정보를 숨깁니다.
반응 16.8 + 기능 구성 요소 - useFocus 훅
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 ]
}
리액션 16.3 + 클래스 컴포넌트 - 활용초점
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}
}
React 0.15에서 가장 간결한 방법은 다음과 같습니다.
<input ref={input => input && input.focus()}/>
리액트에서 자동 포커스를 만들고 싶다면 간단합니다.
<input autoFocus type="text" />
코드를 어디에 배치해야 하는지 알고 싶을 경우 componentDidMount()에 답변이 있습니다.
v014.3
componentDidMount() {
this.refs.linkInput.focus()
}
대부분의 경우 DOM 노드에 ref를 첨부하여 findDOMName을 사용하지 않도록 할 수 있습니다.
API 문서는 https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode 에서 보실 수 있습니다.
React 16.3은 컴포넌트의 컨스트럭터에 ref를 생성하여 다음과 같이 사용함으로써 이 문제를 해결할 수 있는 새로운 편리한 방법을 추가했습니다.
class MyForm extends Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
componentDidMount() {
this.textInput.current.focus();
}
render() {
return(
<div>
<input ref={this.textInput} />
</div>
);
}
}
은, 「 」를 참조해 주세요.React.createRef이 기사는 리액트 블로그에서 확인할 수 있습니다.
업데이트:
리액트 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>
);
};
React 문서에는 이에 대한 섹션이 있습니다.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();
}
}} />
);
},
방금 이 문제가 발생했는데 리액트 15.0.1 15.0.2를 사용하고 있으며 ES6 구문을 사용하고 있지만 v.15가 몇 주 전에 삭제되고 일부 속성이 사용되지 않아 다른 답변에서 필요한 정보를 얻을 수 없었습니다.
일반적으로 제가 필요로 하는 것은 다음과 같습니다.
- 구성 요소가 마운트될 때 첫 번째 입력(필드) 요소에 초점을 맞춥니다.
- 첫 번째 입력(필드) 요소에 오류 초점을 맞춥니다(제출 후).
사용하고 있는 것:
- 리액트 컨테이너/프레젠테이션 컴포넌트
- 리덕스
- 리액트 라우터
첫 번째 입력 요소의 포커스
하였습니다.autoFocus={true}<input />컴포넌트가 마운트될 때 초점을 맞출 수 있도록 페이지에 표시됩니다.
오류가 있는 첫 번째 입력 요소의 포커스
이것은 더 오래 걸렸고 더 복잡했다.간결함을 위해 솔루션과 관련이 없는 코드는 사용하지 않습니다.
리덕스 스토어 / 시/도
시 때를 계속 componentDidUpdate()설정 포커스를 확인합니다.)
이것은, 고객의 애플리케이션에 맞추어 설계할 수 있습니다.
{
form: {
resetFocus: false,
}
}
컨테이너 컴포넌트
the the the the the 。resetfocusCallBack을 사용합니다.
또한 Action Creators를 개별 파일로 구성했습니다.대부분은 프로젝트 규모가 매우 크고 관리하기 쉬운 덩어리로 나누고 싶었기 때문입니다.
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()★★★★★★ 。
건배!
을 사용하다, v0.13 」this.refsAFTER가 될 할 수 .componentDidMount()가 실행됩니다(특이한 경우도 있습니다.
ㅇㅇㅇㅇㅇㅇㅇ를 돼요.autoFocusFakeRainBrigand는 FakeRainBrigand입니다.
@Dhiraj의 답변에 대한 참조 @Dave의 코멘트. 다른 방법으로는 렌더링 중인 요소에서 참조 속성의 콜백 기능을 사용할 수 있습니다(컴포넌트가 처음 렌더링한 후).
<input ref={ function(component){ React.findDOMNode(component).focus();} } />
material-ui TextField 컴포넌트에서는 이 답변 중 어느 것도 효과가 없었습니다.소재에 초점을 맞추는 방법UI 텍스트 필드?이걸 작동시키려면 몇 개의 고리를 뛰어 넘어야 했어요
const focusUsernameInputField = input => {
if (input) {
setTimeout(() => {input.focus()}, 100);
}
};
return (
<TextField
hintText="Username"
floatingLabelText="Username"
ref={focusUsernameInputField}
/>
);
이게 올바른 방법이야, 오토포커스.문자열 대신 콜백을 ref 값으로 사용하면 자동으로 콜백이 호출됩니다.DOM을 만질 필요 없이 레퍼런스를 받을 수 있습니다.getDOMNode
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
유형 스크립트와 함께 리액트 후크 / 기능 컴포넌트를 사용하면 후크를 다음과 같이 사용할 수 있습니다.HTMLInputElement일반적인 파라미터로서useRef:
import React, { useEffect, useRef } from 'react';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<input ref={inputReference} />
</div>
);
}
또는 사용하는 경우reactstrap,공급.inputReference로.innerRef대신ref:
import React, { useEffect, useRef } from 'react';
import { Input } from 'reactstrap';
export default function MyComponent(): JSX.Element {
const inputReference = useRef<HTMLInputElement>(null);
useEffect(() => {
inputReference.current?.focus();
}, []);
return (
<div>
<Input innerRef={inputReference} />
</div>
);
}
이 메서드 호출은 렌더 함수 안에 넣을 수 있습니다.아니면 라이프 사이클 방법 안에서componentDidUpdate
필요없습니다getInputDOMNode?이 경우...
그냥 간단하게ref그리고.focus()컴포넌트가 마운트되었을 때 -- componentDidMount...
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'));
저도 같은 문제가 있지만 애니메이션이 있기 때문에 동료가 window를 사용하자고 제안합니다.
이것은 내 요소의 ref 속성입니다.
ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}
AutoFocus가 가장 잘 작동했어요.몇 개의 텍스트를 더블클릭으로 입력으로 변경해야 했기 때문에 다음과 같은 결과가 나왔습니다.
<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
<input type="text" autoFocus />
항상 심플하고 기본적인 해결책을 먼저 시도해봐, 나한테는 효과가 있어.
새로 작성된 요소로 포커스를 이동하려면 요소의 ID를 상태에 저장하고 이를 사용하여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(즉, 다른 상태를 업데이트 할 때 포커스를 다시 뺏기는 일은 없습니다).
조판본의 Ben Carp 솔루션
반응 16.8 + 기능 구성 요소 - useFocus 훅
export const useFocus = (): [React.MutableRefObject<HTMLInputElement>, VoidFunction] => {
const htmlElRef = React.useRef<HTMLInputElement>(null);
const setFocus = React.useCallback(() => {
if (htmlElRef.current) htmlElRef.current.focus();
}, [htmlElRef]);
return React.useMemo(() => [htmlElRef, setFocus], [htmlElRef, setFocus]);
};
경고: ReactDOMComponent: DOM 노드의 .getDOMName()에 액세스하지 마십시오.대신 노드를 직접 사용하십시오.이 DOM 노드는 다음에 의해 렌더링되었습니다.
App.
그래야 한다
componentDidMount: function () {
this.refs.nameInput.focus();
}
가장 간단한 답은 입력 텍스트 요소에 ref="some name"을 추가하고 아래 함수를 호출하는 것입니다.
componentDidMount(){
this.refs.field_name.focus();
}
// here field_name is ref name.
<input type="text" ref="field_name" />
의 여러 하지 못한 을 알 수 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.
/>
장애 소품을 제거하자 모든 것이 다시 작동하기 시작했습니다.
자동 포커스를 사용하지 않는 심플한 솔루션:
<input ref={ref => ref && ref.focus()}
onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
/>
ref이 「」를 트리거 합니다.onFocus끝 부분을 계산하고 그에 따라 커서를 설정합니다.
다, '안 보인다'는 안 요.getRenderedComponent().props.input
텍스트 입력 참조 설정
this.refs.username.getRenderedComponent().props.input.onChange('');
구문에 「」를 사용할 수 .this.myRref.current.focus()
여기에서 확인할 수 있는 업데이트 버전
componentDidMount() {
// Focus to the input as html5 autofocus
this.inputRef.focus();
}
render() {
return <input type="text" ref={(input) => { this.inputRef = input }} />
})
기능 컴포넌트에 createRef를 사용하여 초점을 맞춥니다.
기능 컴포넌트를 사용하는 개발자에게.이게 어울릴 것 같아요.버튼을 클릭한 후 입력 필드에 포커스가 표시됩니다.Code Sandbox 링크도 첨부했습니다.
import React from 'react';
export default function App() {
const inputRef = React.createRef();
return <>
<input ref={inputRef} type={'text'} />
<button onClick={() => {if (inputRef.current) { inputRef.current.focus() }}} >
Click Here
</button>
</>
}
https://codesandbox.io/s/blazing-http-hfwp9t
이 에러에는 여러가지 이유가 있기 때문에, 제가 직면하고 있는 문제를 투고하고 싶다고 생각했습니다.저에게 있어서 문제는 입력을 다른 컴포넌트의 콘텐츠로 렌더링했다는 것입니다.
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"/>
);
}} />
언급URL : https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering
'programing' 카테고리의 다른 글
| 사용자가 HTTP가 아닌 HTTPS를 통해 내 페이지에 강제로 액세스하도록 하려면 어떻게 해야 합니까? (0) | 2022.10.08 |
|---|---|
| 다중 테이블 선택과 JOIN (퍼포먼스) (0) | 2022.10.08 |
| matplotlib를 사용하여 범례 크기를 변경하는 방법벽면 (0) | 2022.10.02 |
| Python 문자열의 u'\uff' (0) | 2022.10.02 |
| 여러 COLUMN_JSON 결과를 JSON 어레이로 반환 (0) | 2022.10.02 |