React Native: Làm thế nào để chọn TextInput tiếp theo sau khi nhấn nút bàn phím tiếp theo của Cameron?

Tôi đã xác định hai trường TextInput như sau:

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

Nhưng sau khi nhấn nút "tiếp theo" trên bàn phím, ứng dụng gốc phản ứng của tôi sẽ không chuyển sang trường TextInput thứ hai. Làm thế nào tôi có thể đạt được điều đó?

Cảm ơn!

Đặt thứ hai TextInputtập trung, khi trước đó TextInput's onSubmitEditingđược kích hoạt.

Thử cái này

1. Thêm một tham chiếu vào TextInput thứ hai
   ref={(input) => { this.secondTextInput = input; }}

2. Liên kết chức năng tập trung vào sự kiện onSubmitEditing đầu tiên của TextInput .
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Nhớ đặt BlurOnSubmit thành false, để tránh nhấp nháy bàn phím.
   blurOnSubmit={false}

Khi tất cả được thực hiện, nó sẽ trông như thế này.

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

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

Bạn có thể làm điều này mà không cần sử dụng ref . Cách tiếp cận này được ưa thích, vì refs có thể dẫn đến mã dễ vỡ . Các tài liệu React khuyên bạn nên tìm giải pháp khác khi có thể:

Nếu bạn chưa lập trình một số ứng dụng với React, thiên hướng đầu tiên của bạn thường là cố gắng sử dụng các ref để "làm cho mọi thứ xảy ra" trong ứng dụng của bạn. Nếu đây là trường hợp, hãy dành một chút thời gian và suy nghĩ nghiêm túc hơn về nơi nên sở hữu nhà nước trong hệ thống phân cấp thành phần. Thông thường, nó trở nên rõ ràng rằng vị trí thích hợp để "sở hữu" trạng thái đó ở mức cao hơn trong hệ thống phân cấp. Đặt trạng thái ở đó thường loại bỏ bất kỳ mong muốn sử dụng refs để "làm cho mọi thứ xảy ra" - thay vào đó, luồng dữ liệu thường sẽ hoàn thành mục tiêu của bạn.

Thay vào đó, chúng tôi sẽ sử dụng một biến trạng thái để tập trung vào trường đầu vào thứ hai.

1. Thêm một biến trạng thái mà chúng ta sẽ chuyển qua làm chỗ dựa cho DescriptionInput:

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

2. Xác định một phương thức xử lý sẽ đặt biến trạng thái này thành true:

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

3. Khi gửi / nhấn enter / next trên TitleInput, chúng tôi sẽ gọi handleTitleInputSubmit. Điều này sẽ được đặt focusDescriptionInputthành đúng.

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

4. DescriptionInput's focusprop được thiết lập để chúng tôi focusDescriptionInputbiến trạng thái. Vì vậy, khi focusDescriptionInputthay đổi (trong bước 3), DescriptionInputsẽ kết xuất lại với focus={true}.

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

Đây là một cách hay để tránh sử dụng ref, vì ref có thể dẫn đến mã dễ vỡ hơn :)

EDIT: h / t gửi tới @LaneRettig để chỉ ra rằng bạn sẽ cần phải bọc React Native TextInput bằng một số đạo cụ & phương thức được thêm vào để khiến nó phản hồi focus:

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

    static defaultProps = { 
        focus: false,
    } 

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

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

        focus && this.focus(); 
    }

Kể từ React Native 0.36, việc gọi focus()(như được đề xuất trong một số câu trả lời khác) trên nút nhập văn bản không còn được hỗ trợ nữa. Thay vào đó, bạn có thể sử dụng TextInputStatemô-đun từ React Native. Tôi đã tạo mô-đun trợ giúp sau để làm điều này dễ dàng hơn:

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

Sau đó, bạn có thể gọi focusTextInputhàm trên bất kỳ "ref" nào của a TextInput. Ví dụ:

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

Tôi đã tạo một thư viện nhỏ thực hiện việc này, không cần thay đổi mã nào ngoài việc thay thế chế độ xem gói và nhập TextInput của bạn:

import { Form, TextInput } from 'react-native-autofocus'

export default () => (
  <Form>
    <TextInput placeholder="test" />
    <TextInput placeholder="test 2" />
  </Form>
)

https://github.com/zackify/react-native-autof Focus

Giải thích chi tiết tại đây: https://zach.codes/autof Focus-inputs-in-react-native /

Tôi nghĩ rằng tôi sẽ chia sẻ giải pháp của mình bằng cách sử dụng một thành phần chức năng ... ' điều này ' không cần thiết!

Phản ứng 16.12.0 và Phản ứng gốc 0.61.5

Đây là một ví dụ về thành phần của tôi:

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

Tôi không biết, hy vọng điều này sẽ giúp được ai đó =)

Sử dụng Reac -igen 0.45.1 Tôi cũng gặp phải vấn đề khi cố gắng tập trung vào mật khẩu TextInput sau khi nhấn phím return trên tên người dùng TextInput.

Sau khi thử hầu hết các giải pháp được xếp hạng hàng đầu tại đây trên SO, tôi đã tìm thấy một giải pháp trên github đáp ứng nhu cầu của mình: https://github.com/shoutem/ui/issues/44#issuecomment-290724642

Tóm lại:

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

Và sau đó tôi sử dụng nó như thế này:

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

Đối với tôi trên RN 0,50.3 có thể theo cách này:

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

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

Bạn phải xem cái này.PasswordInputRef. _root .f Focus ()

Nếu bạn tình cờ sử dụng tcomb-form-nativenhư tôi, bạn cũng có thể làm điều này. Đây là mẹo: thay vì đặt đạo cụ TextInputtrực tiếp, bạn thực hiện thông qua options. Bạn có thể tham khảo các trường của biểu mẫu như:

this.refs.form.getComponent('password').refs.input.focus()

Vì vậy, sản phẩm cuối cùng trông giống như thế này:

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

(Tín dụng cho remcoanker để đăng ý tưởng tại đây: https://github.com/gcanti/tcomb-form-native/issues/96 )

Đây là cách tôi đạt được nó. Và ví dụ dưới đây đã sử dụng API React.createRef () được giới thiệu trong 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>
    );
  }
}

Tôi nghĩ rằng điều này sẽ giúp bạn.

Kịch bản của tôi là <CustomBoladonesTextInput /> gói RN <TextInput /> .

Tôi đã giải quyết vấn đề này như sau:

Hình thức của tôi trông như:

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

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

Theo định nghĩa thành phần của CustomBoladonesTextInput, tôi chuyển refField cho prop prop bên trong như thế này:

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

Và Voila. Mọi thứ trở lại hoạt động trở lại. Hi vọng điêu nay co ich

Hãy thử giải pháp này về các vấn đề GitHub của React Native.

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

Bạn cần sử dụng prop prop cho thành phần TextInput.
Sau đó, bạn cần tạo một hàm được gọi trên onSubmitEditing prop để di chuyển tiêu điểm trên tham chiếu TextInput thứ hai.

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

Sử dụng refs gọi lại thay vì refs chuỗi kế thừa :

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

Và thêm phương thức cho onSubmitEditing={() => this.focusTextInput(this.refs.password)}như dưới đây:

private focusTextInput(node: any) {
    node.focus();
}

Để giải pháp được chấp nhận hoạt động nếu bạn TextInputở trong một thành phần khác, bạn sẽ cần "bật" tham chiếu từ refđến vùng chứa chính.

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

trong thành phần của bạn:

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

Lưu ý: Tôi đã sử dụng ._rootvì nó là một tham chiếu đến TextInput trong InputBase'L Library '

và trong văn bản đầu vào của bạn như thế này

<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%', }} />

và thêm phương thức

focusNextField(nextField) {
    this.refs[nextField].focus();
}

Có một cách để chụp các tab trong a TextInput. Đó là hacky, nhưng tốt hơn là không có gì .

Xác định một onChangeTexttrình xử lý so sánh giá trị đầu vào mới với giá trị cũ, kiểm tra a \t. Nếu một cái được tìm thấy, hãy tiến lên trường như được hiển thị bởi @boredgames

Giả sử biến usernamechứa giá trị cho tên người dùng và setUsernamegửi một hành động để thay đổi nó trong cửa hàng (trạng thái thành phần, cửa hàng redux, v.v.), hãy làm như thế này:

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

Ở đây một giải pháp thuốc thử cho một thành phần đầu vào có thuộc tính: tiêu điểm.

Trường sẽ được tập trung miễn là chỗ dựa này được đặt thành đúng và sẽ không có tiêu điểm miễn là điều này là sai.

Thật không may, thành phần này cần phải có: ref được xác định, tôi không thể tìm thấy một cách khác để gọi .f Focus () trên nó. Tôi hạnh phúc về các đề xuất.

(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/6f97efe89681ac149113ddec4c394cc5

Nếu bạn đang sử dụng NativeBase làm Thành phần UI, bạn có thể sử dụng mẫu này

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