기본값 대응:다음 키보드 버튼을 누른 후 다음 텍스트 입력을 선택하는 방법은 무엇입니까?
두 개의 텍스트 입력 필드를 다음과 같이 정의했습니다.
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
그러나 키보드의 "다음" 단추를 누른 후 반응 기본 앱이 두 번째 텍스트 입력 필드로 이동하지 않습니다.어떻게 하면 그것을 달성할 수 있을까요?
감사합니다!
번째 두 번 설 정 째를 설정합니다.TextInput의 커스의 때, 전경우이포.TextInput의onSubmitEditing트리거됩니다.
사용해 보세요.
두 번째 텍스트 입력에 참조 추가
ref={(input) => { this.secondTextInput = input; }}Focus 함수를 SubmitEdit 이벤트의 첫 번째 TextInput에 바인딩합니다.
onSubmitEditing={() => { this.secondTextInput.focus(); }}키보드 깜박임을 방지하려면 blurfOnSubmit를 false로 설정해야 합니다.
blurOnSubmit={false}
모든 작업이 완료되면 다음과 같이 표시됩니다.
<TextInput
placeholder="FirstTextInput"
returnKeyType="next"
onSubmitEditing={() => { this.secondTextInput.focus(); }}
blurOnSubmit={false}
/>
<TextInput
ref={(input) => { this.secondTextInput = input; }}
placeholder="secondTextInput"
/>
기능 구성 요소를 사용하여 솔루션을 공유하려고 생각했습니다.'이건 필요 없어요!
반응 16.12.0 및 반응 네이티브 0.61.5
다음은 내 구성 요소의 예입니다.
import React, { useRef } from 'react'
...
const MyFormComponent = () => {
const ref_input2 = useRef();
const ref_input3 = useRef();
return (
<>
<TextInput
placeholder="Input1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_input2.current.focus()}
/>
<TextInput
placeholder="Input2"
returnKeyType="next"
onSubmitEditing={() => ref_input3.current.focus()}
ref={ref_input2}
/>
<TextInput
placeholder="Input3"
ref={ref_input3}
/>
</>
)
}
참조를 사용하지 않고도 이 작업을 수행할 수 있습니다.참조가 취약한 코드로 이어질 수 있기 때문에 이 방법이 선호됩니다.React 문서는 가능한 경우 다른 솔루션을 찾는 것을 권장합니다.
React를 사용하여 여러 앱을 프로그래밍하지 않은 경우, 일반적으로 앱에서 "일을 성사시키기 위해" 참조를 사용하려고 시도하는 것입니다.이 경우 구성 요소 계층에서 상태가 소유되어야 하는 위치에 대해 잠시 생각해 보십시오.종종, 그 상태를 "소유"하기 위한 적절한 위치가 계층에서 더 높은 수준에 있다는 것이 분명해집니다.이러한 상태를 유지하면 "일을 성사시키기 위해" 참조를 사용할 필요가 없어집니다. 대신 데이터 흐름이 일반적으로 목표를 달성할 것입니다.
대신 상태 변수를 사용하여 두 번째 입력 필드에 초점을 맞출 것입니다.
지원도전상변추다니가합수를태에 하세요.
DescriptionInput:initialState() { return { focusDescriptionInput: false, }; }이 상태 변수를 true로 설정할 처리기 메서드를 정의합니다.
handleTitleInputSubmit() { this.setState(focusDescriptionInput: true); }시 /시 /다음을 합니다.
TitleInput우리는 를게요에 전화할 입니다.handleTitleInputSubmit이것은 설정될 것입니다.focusDescriptionInput사실대로<TextInput style = {styles.titleInput} returnKeyType = {"next"} autoFocus = {true} placeholder = "Title" onSubmitEditing={this.handleTitleInputSubmit} />DescriptionInput의focus소품은 우리의 것으로 설정되었습니다.focusDescriptionInput상태 변수입니다.그래서, 언제focusDescriptionInput), 변사항단(3단계),DescriptionInput다니합작다시다▁with로 다시 시작합니다.focus={true}.<TextInput style = {styles.descriptionInput} multiline = {true} maxLength = {200} placeholder = "Description" focus={this.state.focusDescriptionInput} />
이것은 ref를 사용하지 않는 좋은 방법입니다. ref는 더 취약한 코드로 이어질 수 있기 때문입니다 :)
하기 위해 몇소품 및하기 위해 h@LaneRettig에 합니다.focus:
// Props:
static propTypes = {
focus: PropTypes.bool,
}
static defaultProps = {
focus: false,
}
// Methods:
focus() {
this._component.focus();
}
componentWillReceiveProps(nextProps) {
const {focus} = nextProps;
focus && this.focus();
}
, 리트네브티이준 0.36호, 출기액▁as출▁calling호focus()텍스트 입력 노드에서 (다른 몇 가지 답변에서 제안한 대로) 더 이상 지원되지 않습니다.대신, 다음을 사용할 수 있습니다.TextInputState모듈을 선택합니다.이를 쉽게 하기 위해 다음 도우미 모듈을 만들었습니다.
// TextInputManager
//
// Provides helper functions for managing the focus state of text
// inputs. This is a hack! You are supposed to be able to call
// "focus()" directly on TextInput nodes, but that doesn't seem
// to be working as of ReactNative 0.36
//
import { findNodeHandle } from 'react-native'
import TextInputState from 'react-native/lib/TextInputState'
export function focusTextInput(node) {
try {
TextInputState.focusTextInput(findNodeHandle(node))
} catch(e) {
console.log("Couldn't focus text input: ", e.message)
}
}
그러면, 당신은 전화할 수 있습니다.focusTextInput "ref" 한수함의 에 대한 TextInput예:
...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...
나는 이것을 할 수 있는 작은 라이브러리를 만들었는데, 당신의 래핑 뷰를 바꾸고 텍스트 입력을 가져오는 것 외에는 코드를 변경할 필요가 없습니다.
import { Form, TextInput } from 'react-native-autofocus'
export default () => (
<Form>
<TextInput placeholder="test" />
<TextInput placeholder="test 2" />
</Form>
)
https://github.com/zackify/react-native-autofocus
자세한 설명은 https://zach.codes/autofocus-in-react-native/
또한 react-native 0.45.1을 사용하면서 사용자 이름 TextInput에서 반환 키를 누른 후 암호 TextInput에 포커스를 설정하려고 시도하는 문제가 발생했습니다.
여기 SO에서 대부분의 최고 등급의 솔루션을 사용해 본 후 Github에서 제 요구 사항을 충족하는 솔루션을 찾았습니다. https://github.com/shoutem/ui/issues/44#issuecomment-290724642
요약하자면:
import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';
export default class TextInput extends Component {
render() {
const { props } = this;
return (
<RNTextInput
{...props}
ref={(input) => props.inputRef && props.inputRef(input)}
/>
);
}
}
그런 다음 이렇게 사용합니다.
import React, {Component} from 'react';
import {
View,
} from 'react-native';
import TextInput from "../../components/TextInput";
class Login extends Component {
constructor(props) {
super(props);
this.passTextInput = null
}
render() {
return (
<View style={{flex:1}}>
<TextInput
style={{flex:1}}
placeholder="Username"
onSubmitEditing={(event) => {
this.passTextInput.focus()
}}
/>
<TextInput
style={{flex:1}}
placeholder="Password"
inputRef={(input) => {
this.passTextInput = input
}}
/>
</View>
)
}
}
@Eli Johnson의 기능 구성요소용 솔루션과 @Rodrigo Tessarollo의 맞춤형 솔루션 결합텍스트 입력:
import React, { useRef } from 'react';
import { CustomTextInput } from 'path/to/CustomTextInput';
...
export const MyFormComponent = () => {
const ref_to_input2 = useRef();
return (
<>
<CustomTextInput
placeholder="Input 1"
autoFocus={true}
returnKeyType="next"
onSubmitEditing={() => ref_to_input2.current.focus()}
/>
<CustomTextInput
placeholder="Input 2"
returnKeyType="done"
refInner={ref_to_input2}
onSubmitEditing={/* Do something! */}
/>
</>
)
}
사용자 정의에서텍스트 입력 구성 요소:
import { TextInput } from "react-native";
export const CustomTextInput = (props) => {
<TextInput
ref={props.refInner}
{...props}
/>
}
RN 0.50.3의 경우 다음과 같은 방법으로 가능합니다.
<TextInput
autoFocus={true}
onSubmitEditing={() => {this.PasswordInputRef._root.focus()}}
/>
<TextInput ref={input => {this.PasswordInputRef = input}} />
이거 꼭 봐야 돼요.암호 입력 참조._root.vmdk
내 시나리오는 < 커스텀 볼라돈스입니다.RN을 래핑하는 텍스트 입력 /> < 텍스트 입력 />
저는 이 문제를 다음과 같이 해결했습니다.
내 양식은 다음과 같습니다.
<CustomBoladonesTextInput
onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
returnKeyType="next"
... />
<CustomBoladonesTextInput
ref={ref => this.customInput2 = ref}
refInner="innerTextInput2"
... />
사용자 지정 볼라돈에서TextInput의 구성 요소 정의에서 refField를 다음과 같이 내부 refprop에 전달합니다.
export default class CustomBoladonesTextInput extends React.Component {
render() {
return (< TextInput ref={this.props.refInner} ... />);
}
}
그리고 voila.모든 것이 다시 작동합니다.이것이 도움이 되길 바랍니다.
만약 당신이 나처럼 사용하고 있다면, 이것도 할 수 있습니다.비결은 다음과 같습니다: 소품을 설정하는 대신TextInput직접, 당신은 그것을 통해 합니다.options양식의 필드를 다음과 같이 나타낼 수 있습니다.
this.refs.form.getComponent('password').refs.input.focus()
최종 제품은 다음과 같습니다.
var t = require('tcomb-form-native');
var Form = t.form.Form;
var MyForm = t.struct({
field1: t.String,
field2: t.String,
});
var MyComponent = React.createClass({
_getFormOptions () {
return {
fields: {
field1: {
returnKeyType: 'next',
onSubmitEditing: () => {this.refs.form.getComponent('field2').refs.input.focus()},
},
},
};
},
render () {
var formOptions = this._getFormOptions();
return (
<View style={styles.container}>
<Form ref="form" type={MyForm} options={formOptions}/>
</View>
);
},
});
(여기에 아이디어를 게시한 것에 대한 리코뱅커의 공로: https://github.com/gcanti/tcomb-form-native/issues/96)
이것이 제가 그것을 성취한 방법입니다.그리고 아래 예제에서는 React 16.3에 도입된 React.createRef() API를 사용했습니다.
class Test extends React.Component {
constructor(props) {
super(props);
this.secondTextInputRef = React.createRef();
}
render() {
return(
<View>
<TextInput
placeholder = "FirstTextInput"
returnKeyType="next"
onSubmitEditing={() => { this.secondTextInputRef.current.focus(); }}
/>
<TextInput
ref={this.secondTextInputRef}
placeholder = "secondTextInput"
/>
</View>
);
}
}
이것이 당신에게 도움이 될 것 같습니다.
React Native의 GitHub 문제에 대해 이 솔루션을 사용해 보십시오.
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
TextInput 구성 요소에 refprop를 사용해야 합니다.
그런 다음 두 번째 텍스트 입력 참조로 포커스를 이동하는 SubmitEditing prop에서 호출되는 함수를 만들어야 합니다.
var InputScreen = React.createClass({
_focusNextField(nextField) {
this.refs[nextField].focus()
},
render: function() {
return (
<View style={styles.container}>
<TextInput
ref='1'
style={styles.input}
placeholder='Normal'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('2')}
/>
<TextInput
ref='2'
style={styles.input}
keyboardType='email-address'
placeholder='Email Address'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('3')}
/>
<TextInput
ref='3'
style={styles.input}
keyboardType='url'
placeholder='URL'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('4')}
/>
<TextInput
ref='4'
style={styles.input}
keyboardType='numeric'
placeholder='Numeric'
blurOnSubmit={false}
onSubmitEditing={() => this._focusNextField('5')}
/>
<TextInput
ref='5'
style={styles.input}
keyboardType='numbers-and-punctuation'
placeholder='Numbers & Punctuation'
returnKeyType='done'
/>
</View>
);
}
});
<TextInput placeholder="Nombre"
ref="1"
editable={true}
returnKeyType="next"
underlineColorAndroid={'#4DB6AC'}
blurOnSubmit={false}
value={this.state.First_Name}
onChangeText={First_Name => this.setState({ First_Name })}
onSubmitEditing={() => this.focusNextField('2')}
placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />
<TextInput placeholder="Apellido"
ref="2"
editable={true}
returnKeyType="next"
underlineColorAndroid={'#4DB6AC'}
blurOnSubmit={false}
value={this.state.Last_Name}
onChangeText={Last_Name => this.setState({ Last_Name })}
onSubmitEditing={() => this.focusNextField('3')}
placeholderTextColor="#797a7a" style={{ marginBottom: 10, color: '#808080', fontSize: 15, width: '100%', }} />
및 추가 방법
focusNextField(nextField) {
this.refs[nextField].focus();
}
기존 문자열 ref 대신 콜백 ref 사용:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title"
onSubmitEditing={() => {this.nextInput.focus()}}
/>
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description"
ref={nextInput => this.nextInput = nextInput}
/>
승인된 솔루션이 작동하려면 다음과 같이 하십시오.TextInput다른 구성 요소 안에 있으면 참조를 "팝업"해야 합니다.ref상위 컨테이너로 이동합니다.
// MyComponent
render() {
<View>
<TextInput ref={(r) => this.props.onRef(r)} { ...this.props }/>
</View>
}
// MyView
render() {
<MyComponent onSubmitEditing={(evt) => this.myField2.focus()}/>
<MyComponent onRef={(r) => this.myField2 = r}/>
}
구성 요소:
constructor(props) {
super(props);
this.focusNextField = this
.focusNextField
.bind(this);
// to store our input refs
this.inputs = {};
}
focusNextField(id) {
console.log("focus next input: " + id);
this
.inputs[id]
._root
.focus();
}
참고: 사용했습니다.._rootNativeBase 'Library' Input의 TextInput에 대한 참조이기 때문입니다.
그리고 당신의 텍스트 입력에는 다음과 같은 것이 있습니다.
<TextInput
onSubmitEditing={() => {
this.focusNextField('two');
}}
returnKeyType="next"
blurOnSubmit={false}/>
<TextInput
ref={input => {
this.inputs['two'] = input;
}}/>
<TextInput
keyboardType="email-address"
placeholder="Email"
returnKeyType="next"
ref="email"
onSubmitEditing={() => this.focusTextInput(this.refs.password)}
blurOnSubmit={false}
/>
<TextInput
ref="password"
placeholder="Password"
secureTextEntry={true} />
그리고 방법을 추가합니다.onSubmitEditing={() => this.focusTextInput(this.refs.password)}아래와 같이:
private focusTextInput(node: any) {
node.focus();
}
다음은 reactjs 전화 코드 입력에 대한 방법입니다.
import React, { useState, useRef } from 'react';
function Header(props) {
const [state , setState] = useState({
phone_number:"",
code_one:'',
code_two:'',
code_three:'',
code_four:'',
submitted:false,
})
const codeOneInput = useRef(null);
const codeTwoInput = useRef(null);
const codeThreeInput = useRef(null);
const codeFourInput = useRef(null);
const handleCodeChange = (e) => {
const {id , value} = e.target
if(value.length < 2){
setState(prevState => ({
...prevState,
[id] : value
}))
if(id=='code_one' && value.length >0){
codeTwoInput.current.focus();
}
if(id=='code_two' && value.length >0){
codeThreeInput.current.focus();
}
if(id=='code_three' && value.length >0){
codeFourInput.current.focus();
}
}
}
const sendCodeToServer = () => {
setState(prevState => ({
...prevState,
submitted : true,
}))
let codeEnteredByUser = state.code_one + state.code_two + state.code_three + state.code_four
axios.post(API_BASE_URL, {code:codeEnteredByUser})
.then(function (response) {
console.log(response)
})
}
return(
<>
<div className="are">
<div className="POP-INN-INPUT">
<input type="text" id="code_one" ref={codeOneInput} value={state.code_one} onChange={handleCodeChange} autoFocus/>
<input type="text" id="code_two" ref={codeTwoInput} value={state.code_two} onChange={handleCodeChange}/>
<input type="text" id="code_three" ref={codeThreeInput} value={state.code_three} onChange={handleCodeChange}/>
<input type="text" id="code_four" ref={codeFourInput} value={state.code_four} onChange={handleCodeChange}/>
</div>
<button disabled={state.submitted} onClick={sendCodeToServer}>
</div>
</>
)
}
export default
탭을 캡처하는 방법이 있습니다.TextInput촌스럽지만 없는 것보다는 낫습니다.
정의onChangeText새 입력 값을 이전 입력 값과 비교하는 핸들러, 확인\t하나가 발견되면 @boredgames에 표시된 대로 필드를 진행합니다.
변수를 가정username에는 사용자 이름의 값이 포함되어 있습니다.setUsername에서는 저장소(구성 요소 상태, 중복 제거 저장소 등)에서 변경 작업을 발송하고 다음과 같은 작업을 수행합니다.
function tabGuard (newValue, oldValue, callback, nextCallback) {
if (newValue.indexOf('\t') >= 0 && oldValue.indexOf('\t') === -1) {
callback(oldValue)
nextCallback()
} else {
callback(newValue)
}
}
class LoginScene {
focusNextField = (nextField) => {
this.refs[nextField].focus()
}
focusOnPassword = () => {
this.focusNextField('password')
}
handleUsernameChange = (newValue) => {
const { username } = this.props // or from wherever
const { setUsername } = this.props.actions // or from wherever
tabGuard(newValue, username, setUsername, this.focusOnPassword)
}
render () {
const { username } = this.props
return (
<TextInput ref='username'
placeholder='Username'
autoCapitalize='none'
autoCorrect={false}
autoFocus
keyboardType='email-address'
onChangeText={handleUsernameChange}
blurOnSubmit={false}
onSubmitEditing={focusOnPassword}
value={username} />
)
}
}
RN에 일종의 Tabindex 시스템이 없다는 것은 정말 짜증나는 일입니다.
기능적인 구성요소로서, 제 사용 사례를 위해, 저는 입력을 위한 문자열 ID 배열을 가지고 있으며, 이를 반복하여 각각 하나의 텍스트 입력을 보여줍니다.다음 코드는 사용자가 자동으로 모든 필드를 건너뛰어 키보드가 필드 사이에서 사라지거나 다시 나타나지 않도록 하고 마지막에 키보드의 적절한 "동작" 버튼을 표시합니다.
유형 스크립트, 네이티브 베이스.
const stringFieldIDs = [
'q1', 'q2', 'q3'
];
export default () => {
const stringFieldRefs = stringFieldIDs.map(() => useRef < any > ());
const basicStringField = (id: string, ind: number) => {
const posInd = stringFieldIDs.indexOf(id);
const isLast = posInd === stringFieldIDs.length - 1;
return ( <
Input blurOnSubmit = {
isLast
}
ref = {
stringFieldRefs[posInd]
}
returnKeyType = {
isLast ? 'done' : 'next'
}
onSubmitEditing = {
isLast ?
undefined :
() => stringFieldRefs[posInd + 1].current._root.focus()
}
/>
);
};
return stringFieldIDs.map(basicStringField);
};import React, { useState, useEffect, useRef, } from 'react';
const OTP = (props) => {
const OTP = [];
const ref_input = [];
ref_input[0] = useRef();
ref_input[1] = useRef();
ref_input[2] = useRef();
ref_input[3] = useRef();
const focusNext = (text, index) => {
if (index < ref_input.length - 1 && text) {
ref_input[index + 1].current.focus();
}
if (index == ref_input.length - 1) {
ref_input[index].current.blur();
}
OTP[index] = text;
}
const focusPrev = (key, index) => {
if (key === "Backspace" && index !== 0) {
ref_input[index - 1].current.focus();
}
}
return (
<SafeAreaView>
<View>
<ScrollView contentInsetAdjustmentBehavior="automatic" showsVerticalScrollIndicator={false}>
<View style={loginScreenStyle.titleWrap}>
<Title style={loginScreenStyle.titleHeading}>Verify OTP</Title>
<Subheading style={loginScreenStyle.subTitle}>Enter the 4 digit code sent to your mobile number</Subheading>
</View>
<View style={loginScreenStyle.inputContainer}>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
autoFocus={true}
returnKeyType="next"
ref={ref_input[0]}
onChangeText={text => focusNext(text, 0)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 0)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[1]}
onChangeText={text => focusNext(text, 1)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 1)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[2]}
onChangeText={text => focusNext(text, 2)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 2)}
/>
<TextInput
mode="flat"
selectionColor={Colors.primaryColor}
underlineColorAndroid="transparent"
textAlign='center'
maxLength={1}
keyboardType='numeric'
style={formScreenStyle.otpInputStyle}
ref={ref_input[3]}
onChangeText={text => focusNext(text, 3)}
onKeyPress={e => focusPrev(e.nativeEvent.key, 3)}
/>
</View>
</ScrollView>
</View>
</SafeAreaView >
)
}
export default OTP;
NativeBase를 UI 구성 요소로 사용하는 경우 이 샘플을 사용할 수 있습니다.
<Item floatingLabel>
<Label>Title</Label>
<Input
returnKeyType = {"next"}
autoFocus = {true}
onSubmitEditing={(event) => {
this._inputDesc._root.focus();
}} />
</Item>
<Item floatingLabel>
<Label>Description</Label>
<Input
getRef={(c) => this._inputDesc = c}
multiline={true} style={{height: 100}} />
onSubmitEditing={(event) => { this._inputLink._root.focus(); }} />
</Item>
onSubmitEditing다음과 같은 경우에 호출됩니다.returnKeyType키를 누릅니다.다음 입력으로 전환하면 깜박임을 방지할 수 있습니다(고속 시스템에서는 무시할 수 있음).blurOnSubmit={false}
import React, { ReactElement, useRef, useState } from "react";
import { ScrollView, TextInput as NativeTextInput, TouchableOpacity } from "react-native";
export default function LoginScreen({ navigation, route }: LoginProps): ReactElement {
const passwordRef = useRef<NativeTextInput | null>(null);
const [form, setForm] = useState({
username: "player1",
password: "player1234"
});
const setFormInput = (key: keyof typeof form, value: string) =>
setForm({ ...form, [key]: value });
return (
<ScrollView contentContainerStyle={styles.container}>
<TextInput
value={form.username}
onChangeText={value => setFormInput("username", value)}
returnKeyType="next"
blurOnSubmit={false}
placeholder="Username"
onSubmitEditing={() => {
passwordRef.current?.focus();
}}
/>
<TextInput
value={form.password}
onChangeText={value => setFormInput("password", value)}
ref={passwordRef}
returnKeyType="done"
secureTextEntry
placeholder="Password"
/>
</ScrollView>
);
}
여기서는 :focus 속성을 가진 입력 구성요소에 대한 시약 용액입니다.
이 소품이 true로 설정되어 있는 한 필드에 초점이 맞춰지고 잘못된 경우에는 초점이 맞춰지지 않습니다.
안타깝게도 이 구성 요소에는 :ref가 정의되어 있어야 하므로 .focus()를 호출할 수 있는 다른 방법을 찾을 수 없습니다.저는 제안에 만족합니다.
(defn focusable-input [init-attrs]
(r/create-class
{:display-name "focusable-input"
:component-will-receive-props
(fn [this new-argv]
(let [ref-c (aget this "refs" (:ref init-attrs))
focus (:focus (ru/extract-props new-argv))
is-focused (.isFocused ref-c)]
(if focus
(when-not is-focused (.focus ref-c))
(when is-focused (.blur ref-c)))))
:reagent-render
(fn [attrs]
(let [init-focus (:focus init-attrs)
auto-focus (or (:auto-focus attrs) init-focus)
attrs (assoc attrs :auto-focus auto-focus)]
[input attrs]))}))
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5
언급URL : https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar
'programing' 카테고리의 다른 글
| SQL Server에서 "Null" 값의 크기 (0) | 2023.04.26 |
|---|---|
| 두 개의 목록 결합 및 중복 제거, 원래 목록의 중복 제거 안 함 (0) | 2023.04.26 |
| Bash에서는 대괄호[ ]가 대괄호[ ]보다 좋습니까? (0) | 2023.04.21 |
| ThreadPool 사용.ASP의 QueueUserWorkItem.고트래픽 시나리오에서의 NET (0) | 2023.04.21 |
| 인수 없이 펑크를 무효화하다 (0) | 2023.04.21 |