React Native: วิธีเลือก TextInput ถัดไปหลังจากกดปุ่มแป้นพิมพ์“ ถัดไป”

ฉันกำหนดฟิลด์ TextInput สองฟิลด์ดังนี้:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

แต่หลังจากกดปุ่ม "ถัดไป" บนแป้นพิมพ์แอพตอบโต้พื้นเมืองของฉันจะไม่ข้ามไปที่ฟิลด์ TextInput อันที่สอง ฉันจะบรรลุสิ่งนั้นได้อย่างไร

ขอบคุณ!

ชุดที่สองTextInputโฟกัสเมื่อก่อนหน้านี้TextInput's onSubmitEditingจะถูกเรียก

ลองสิ่งนี้

1. เพิ่มการอ้างอิงถึงTextInput ที่สอง
   ref={(input) => { this.secondTextInput = input; }}

2. ผูกฟังก์ชั่นโฟกัสไปที่แรก TextInputเหตุการณ์ onSubmitEditing 's
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. อย่าลืมตั้งค่า blurOn ส่งเป็น false เพื่อป้องกันการกะพริบของคีย์บอร์ด
   blurOnSubmit={false}

เมื่อเสร็จแล้วควรมีลักษณะเช่นนี้

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

คุณสามารถทำได้โดยไม่ต้องใช้ refs วิธีนี้เป็นที่ต้องการเนื่องจากการอ้างอิงสามารถนำไปสู่รหัสที่เปราะบางได้ React เอกสารคำแนะนำการหาโซลูชั่นอื่น ๆ ที่เป็นไปได้:

หากคุณไม่ได้ตั้งโปรแกรมหลายแอพด้วย React ความโน้มเอียงแรกของคุณมักจะเป็นการพยายามใช้ refs เพื่อ "ทำให้สิ่งต่าง ๆ เกิดขึ้น" ในแอปของคุณ หากเป็นกรณีนี้ให้ใช้เวลาสักครู่และคิดวิเคราะห์อย่างถี่ถ้วนยิ่งขึ้นว่ารัฐควรเป็นเจ้าของลำดับชั้นส่วนประกอบอย่างไร บ่อยครั้งเป็นที่ชัดเจนว่าสถานที่ที่เหมาะสมในการ "เป็นเจ้าของ" สถานะนั้นอยู่ในระดับที่สูงขึ้นในลำดับชั้น การวางสถานะที่นั่นมักจะขจัดความปรารถนาที่จะใช้การอ้างอิงเพื่อ "ทำให้สิ่งต่าง ๆ เกิดขึ้น" - แต่การไหลของข้อมูลมักจะบรรลุเป้าหมายของคุณ

แต่เราจะใช้ตัวแปรสถานะเพื่อเน้นฟิลด์อินพุตที่สอง

1. เพิ่มตัวแปรสถานะที่เราจะส่งผ่านเป็น prop ไปที่DescriptionInput:

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

2. กำหนดวิธีการจัดการที่จะตั้งค่าตัวแปรสถานะนี้เป็นจริง:

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

3. เมื่อส่ง / ตีใส่ / ถัดไปบนเราจะเรียกTitleInput handleTitleInputSubmitสิ่งนี้จะถูกตั้งค่าfocusDescriptionInputเป็นจริง

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

4. DescriptionInput's focusเสามีการตั้งค่าของเราfocusDescriptionInputตัวแปรรัฐ ดังนั้นเมื่อfocusDescriptionInputมีการเปลี่ยนแปลง (ในขั้นตอนที่ 3) DescriptionInputจะ focus={true}re-ทำให้กับ

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

นี่เป็นวิธีที่ดีในการหลีกเลี่ยงการใช้ refs เนื่องจาก refs สามารถนำไปสู่โค้ดที่บอบบางกว่า :)

แก้ไข: h / t ถึง @LaneRettig เพื่อชี้ให้เห็นว่าคุณจะต้องห่อ 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(); 
    }

ตั้งแต่ React Native 0.36 การโทรfocus()(ดังที่แนะนำในคำตอบอื่น ๆ ) บนโหนดป้อนข้อความไม่รองรับอีกต่อไป คุณสามารถใช้TextInputStateโมดูลจาก React Native แทนได้ ฉันสร้างโมดูลตัวช่วยต่อไปนี้เพื่อทำให้ง่ายขึ้น:

// 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ฟังก์ชั่นใด ๆ "อ้าง" TextInputของ ตัวอย่างเช่น:

...
<TextInput onSubmit={() => focusTextInput(this.refs.inputB)} />
<TextInput ref="inputB" />
...

ฉันสร้างห้องสมุดขนาดเล็กที่ทำสิ่งนี้ไม่จำเป็นต้องเปลี่ยนรหัสนอกเหนือไปจากการเปลี่ยนมุมมองการตัดและนำเข้า TextInput:

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-inputs-in-react-native/

คิดว่าฉันจะแบ่งปันวิธีแก้ปัญหาของฉันโดยใช้ส่วนประกอบฟังก์ชั่น ... ' นี้ ' ไม่จำเป็น!

ตอบสนอง 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-native 0.45.1 ฉันยังประสบปัญหาในการพยายามกำหนดโฟกัสบนรหัสผ่าน TextInput หลังจากกดปุ่มย้อนกลับบนชื่อผู้ใช้ TextInput

หลังจากลองใช้โซลูชันที่ได้รับความนิยมสูงสุดที่นี่ฉันจึงพบวิธีแก้ปัญหาบน 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>
        )
    }
}

สำหรับฉันใน RN 0.50.3 เป็นไปได้ด้วยวิธีนี้:

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

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

คุณต้องดูสิ่งนี้รหัสผ่านอินพุทรีฟ _root .focus ()

หากคุณบังเอิญที่จะใช้tcomb-form-nativeอย่างฉันฉันก็สามารถทำได้เช่นกัน นี่คือเคล็ดลับ: แทนของการตั้งค่าอุปกรณ์ประกอบฉากของโดยตรงคุณทำมันได้ผ่านทาง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>
    );
  },
});

(ให้เครดิตกับ remcoanker สำหรับการโพสต์ความคิดที่นี่: https://github.com/gcanti/tcomb-form-native/issues/96 )

นี่คือวิธีที่ฉันประสบความสำเร็จ และตัวอย่างด้านล่างนี้ใช้ React.createRef () API ที่แนะนำใน React 16.3

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

ฉันคิดว่านี่จะช่วยคุณได้

สถานการณ์ของฉันคือ<CustomBoladonesTextInput />ห่อ RN <TextInput />

ฉันแก้ไขปัญหานี้ดังนี้:

แบบฟอร์มของฉันดูเหมือนว่า:

  <CustomBoladonesTextInput 
      onSubmitEditing={() => this.customInput2.refs.innerTextInput2.focus()}
      returnKeyType="next"
      ... />

  <CustomBoladonesTextInput 
       ref={ref => this.customInput2 = ref}
       refInner="innerTextInput2"
       ... />

ในการกำหนดองค์ประกอบของ CustomBoladonesTextInput ฉันจะส่ง refField ไปที่ prop ref ด้านในดังนี้:

   export default class CustomBoladonesTextInput extends React.Component {
      render() {        
         return (< TextInput ref={this.props.refInner} ... />);     
      } 
   }

และ voila ทุกอย่างกลับมาทำงานได้อีกครั้ง หวังว่านี่จะช่วยได้

ลองวิธีนี้ในการแก้ปัญหา GitHub ของ React Native

https://github.com/facebook/react-native/pull/2149#issuecomment-129262565

คุณต้องใช้ ref prop สำหรับองค์ประกอบ TextInput
จากนั้นคุณต้องสร้างฟังก์ชั่นที่ได้รับการเรียกบน propubitEditing ที่ย้ายโฟกัสบนการอ้างอิง TextInput ที่สอง

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

เพื่อให้โซลูชันที่ยอมรับใช้งานได้หากคุณ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();
    }

หมายเหตุ: ฉันใช้._rootเพราะเป็นการอ้างอิงถึง TextInput ในNativeBase'Library 'Input

และในการป้อนข้อความของคุณเช่นนี้

<TextInput
         onSubmitEditing={() => {
                          this.focusNextField('two');
                          }}
         returnKeyType="next"
         blurOnSubmit={false}/>


<TextInput      
         ref={input => {
              this.inputs['two'] = input;
                        }}/>

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

ไม่มีทางที่จะจับเป็นแท็บTextInputใน มัน hacky แต่ดีกว่าไม่มีอะไร

กำหนดจัดการที่เปรียบเทียบค่าที่ป้อนข้อมูลใหม่กับเก่าตรวจสอบหาonChangeText \tหากพบผู้ใดให้เลื่อนไปที่ฟิลด์ดังที่แสดงโดย @boredgames

สมมติว่าตัวแปรusernameมีค่าสำหรับชื่อผู้ใช้และsetUsernameยื้อการกระทำที่จะเปลี่ยนมันในการจัดเก็บ (สถานะส่วนประกอบร้านค้า redux ฯลฯ ) ทำสิ่งนี้:

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

ต่อไปนี้เป็นโซลูชันรีเอเจนต์สำหรับคอมโพเนนต์อินพุตที่มีคุณสมบัติโฟกัส:

ฟิลด์จะถูกโฟกัสตราบเท่าที่ prop นี้ถูกตั้งค่าเป็นจริงและจะไม่ได้โฟกัสตราบเท่าที่นี่เป็นเท็จ

น่าเสียดายที่องค์ประกอบนี้จำเป็นต้องมี: ref ที่กำหนดไว้ฉันไม่สามารถหาวิธีอื่นในการโทรหา. โฟกัส () กับมัน ฉันมีความสุขกับข้อเสนอแนะ

(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

หากคุณใช้ 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>