[ios] 네이티브 반응 :“다음”키보드 버튼을 누른 후 다음 TextInput을 선택하는 방법?

refs를 사용하지 않고도이 작업을 수행 할 수 있습니다 . 참조는 깨지기 쉬운 코드로 이어질 수 있으므로이 방법이 선호 됩니다. 는 문서의 반작용 가능한 다른 솔루션을 찾아 조언을 :

React로 여러 앱을 프로그래밍하지 않은 경우 일반적으로 첫 번째 성향은 앱에서 “일이 발생하도록”참조를 사용하는 것입니다. 이 경우 잠시 시간을내어 구성 요소 계층에서 상태를 소유해야하는 위치에 대해보다 비판적으로 생각하십시오. 종종 해당 상태를 “소유”하는 적절한 장소가 계층 구조에서 더 높은 수준에 있다는 것이 분명해집니다. 상태를 설정하면 “일을 발생시키기”위해 심판을 사용하려는 욕구가 종종 제거됩니다. 대신 데이터 흐름이 일반적으로 목표를 달성합니다.

대신 상태 변수를 사용하여 두 번째 입력 필드에 초점을 맞 춥니 다.

1. 소품으로 전달할 상태 변수를 다음에 추가하십시오 DescriptionInput.

   initialState() {
     return {
       focusDescriptionInput: false,
     };
   }

2. 이 상태 변수를 true로 설정하는 핸들러 메소드를 정의하십시오.

   handleTitleInputSubmit() {
     this.setState(focusDescriptionInput: true);
   }

3. 에 enter / next를 제출 / 타자하면을 TitleInput호출 handleTitleInputSubmit합니다. 이것은 focusDescriptionInputtrue로 설정 됩니다.

   <TextInput
      style = {styles.titleInput}
      returnKeyType = {"next"}
      autoFocus = {true}
      placeholder = "Title"
      onSubmitEditing={this.handleTitleInputSubmit}
   />

4. DescriptionInput의 focusprop은 focusDescriptionInput상태 변수로 설정됩니다 . 따라서 focusDescriptionInput3 단계에서 변경 DescriptionInput하면으로 다시 렌더링됩니다 focus={true}.

   <TextInput
      style = {styles.descriptionInput}
      multiline = {true}
      maxLength = {200}
      placeholder = "Description"
      focus={this.state.focusDescriptionInput}
   />

refs는 더 약한 코드로 이어질 수 있기 때문에 refs를 사용하지 않는 좋은 방법입니다. 🙂

편집 : @LaneRettig에 h / t를 추가하여 React Native TextInput을 추가 소품 및 메소드로 감싸서 응답해야한다고 지적했습니다 focus.

    // Props:
    static propTypes = {
        focus: PropTypes.bool,
    }

    static defaultProps = {
        focus: false,
    }

    // Methods:
    focus() {
        this._component.focus();
    }

    componentWillReceiveProps(nextProps) {
        const {focus} = nextProps;

        focus && this.focus();
    }

답변

// 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)
  }
}

...
<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>
)

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}
      />
    </>
  )
}

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>
        )
    }
}

<TextInput
  autoFocus={true}
  onSubmitEditing={() => {this.PasswordInputRef._root.focus()}}
/>

<TextInput ref={input => {this.PasswordInputRef = input}} />