相关疑难解决方法(0)

在React文档中,他们说:

React还支持使用字符串(而不是回调)作为任何组件的ref prop,尽管此方法在此时主要是遗留的.

https://facebook.github.io/react/docs/more-about-refs.html

请看以下示例:

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref={input => (this._input = input)} />;
  }
  action() {
    console.log(this._input.value);
  }
}

为什么我更喜欢这个,而不是:

class Foo extends Component {
  render() {
    return <input onClick={() => this.action()} ref='input' />;
  }
  action() {
    console.log(this.refs.input.value);
  }
}

？

第二个例子似乎更干净,更容易.
是否存在不推荐使用字符串方法的风险？

注意:我正在寻找文档中声明的"官方"答案,我不是在询问个人喜好等等.

我正在尝试创建一个受密码保护的屏幕.屏幕将使用4个数字输入作为密码.

我这样做的方法是创建一个TextInput组件,并在我的主屏幕中调用它4次.

我遇到的问题是当我键入前一个TextInput的值时,TextInputs不会关注下一个.

我正在为所有PasscodeTextInput组件使用refs(我已被告知这是一种遗留方法,但我不知道其他任何方式,唉).

试过这个方法(没有创建我自己的组件),也没有运气. 方法

index.ios.js

import React, { Component } from 'react';
import { AppRegistry, TextInput, View, Text } from 'react-native';
import { PasscodeTextInput } from './common';

export default class ProgressBar extends Component {
  render() {
    const { centerEverything, container, passcodeContainer,  textInputStyle} = styles;
    return (
      <View style={[centerEverything, container]}>
        <View style={[passcodeContainer]}>
          <PasscodeTextInput
            autoFocus={true}
            ref="passcode1"
            onSubmitEditing={(event) => { this.refs.passcode2.focus() }} />
          <PasscodeTextInput
            ref="passcode2"
            onSubmitEditing={(event) => { this.refs.passcode3.focus() }} />
          <PasscodeTextInput
            ref="passcode3"
            onSubmitEditing={(event) => { this.refs.passcode4.focus() }}/>
          <PasscodeTextInput
            ref="passcode4" /> …

我returnKeyType = "next"在 TextInput 组件中使用，但它的工作方式类似于returnKeyType="go"而不是移动到下一个文本输入字段。

我们如何使用键盘上的“下一步”按钮从一个文本输入字段移动到下一个文本输入字段？

我需要在 android 平台的 react native 中关注下一个字段输入。但是 focus() 函数，在 android react native 中不存在，只在 IOS 中存在。

这个怎么弄？我使用带有打字稿的本机反应。

我在React Native应用程序中使用Redux Form(RF).一切正常但我无法弄清楚如何refs从Field输入到Redux Form转到下一个输入字段.

没有RF,这个解决方案就可以正常工作.

这是我的代码:

class RenderInput extends Component {
   const { input, nextField, refs,
        meta: { touched, error, warning },
        input: { onChange } } = this.props
   render() {
      return (
         <Input
            returnKeyType = {'next'}
            onChangeText={onChange}
            onBlur={input.onBlur}
            onFocus={input.onFocus}
            onSubmitEditing = {(event) => {
               // refs is undefined
               refs[nextField].focus()
            }}/>
      )
   }
}

class Form extends Component {
   render() {
      return (
         <Field
            name="field1"
            focus
            withRef
            ref='field1'
            nextField = "field2"
            component={RenderInput}/> …

我有一个名为 ImageTextField 的组件：

import React from 'react';
import {TextInput, View } from 'react-native';

export default class ImageTextField extends React.Component {
  render() {
    const {
      placeHolderValue, value, editable
    } = this.props;
    return (
      <View>
        <TextInput
          placeholder={placeHolderValue}
          placeholderTextColor="#b1b1b1"
          value={value}
          editable={editable}
        />
      </View>
    );
  }
}

我的屏幕：

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import ImageTextField from '../../custom-elements/ImageTextField';

export default class App extends React.Component {
  render() {
    return (
      <ImageTextField 
        onChangeText={text => this.onNameChange(text)}
        color={Colors.textFieldBlack}
        placeHolderValue="Name"
        value={this.state.name}
        autoCapitalize="words"
      /> …

注意：我知道有很多类似的问题，我已经尝试对它们实施答案，但没有成功。

在我的 React Native 应用程序中，我有一个接受有限数量的自定义文本输入组件的表单。我正在尝试找到一种解决方案，当用户按下返回按钮时移动到下一个输入。\xe2\x80\xa8\xe2\x80\xa8I\xe2\x80\x99已经尝试了一些软件包，但似乎没有一个工作得很好与安卓。我\xe2\x80\x99ve也尝试过使用refs，但can\xe2\x80\x99t似乎很幸运（注意表单是一个功能组件）。当我尝试在浮动标签组件内访问它时，它不断返回未定义。

自定义组件：

<FloatLabelTextInput\n          value={billingFirstName}\n          onChangeText={newText => setBillingFirstName(newText)}\n          autoCorrect={false}\n          style={globalStyles.textInput}\n          label="Billing First Name"\n        />\xe2\x80\xa8\n

\xe2\x80\xa8浮动标签文本输入组件呈现文本输入（带有基于材质的浮动标签）。

\xe2\x80\xa8import React, { Component } from \'react\';\nimport {\n  Alert,\n  Button,\n  View,\n  TextInput,\n  Animated,\n  Image,\n  TouchableOpacity,\n} from \'react-native\';\nimport colors from \'../utils/colors\';\n\nexport default class FloatLabelTextInput extends Component<Props> {\n  static defaultProps = {\n    editable: true,\n    showHelp: false,\n  };\n\n  state = {\n    isFocused: false,\n  };\n\n\n\n  componentDidUpdate() {\n    Animated.timing(this.animatedIsFocused, {\n      toValue: this.state.isFocused || this.props.value !== \'\' ? 1 : 0,\n      duration: 200,\n …

我正在尝试实现此处提出的解决方案,以便将焦点设置在下一个TextInput上.该解决方案是针对iOS提出的,但我认为它也适用于Android.

但是我得到以下异常:

undefined is not a function (evaluating '_this3.refs.Second.focus()')

我使用此浮动标签作为我的文本输入组件.这是我的代码:

  <FloatingLabel
            label='First'
            ref='First'
            validationRegex={/[A-Za-z0-9 ]+/}
            value={this.props.First}
            style={commonStyles.formInput}
            onSubmitEditing={(event) => {this.refs.Second.focus()}}
              onChangeText={(text) => this.onUpdate('First', text)}>
              First</FloatingLabel>

  <FloatingLabel
            label='Second'
            ref='Second'
            style={commonStyles.formInput}
            value={this.props.Second}
            validationRegex={/(^([a-zA-Z]{5})([0-9]{4})([a-zA-Z]{1})$)/}
            onChangeText={(text) => this.onUpdate('Second', text)}>
          Second</FloatingLabel>

有人可以帮我解决这个例外吗？(RN 0.29,Android)

onSubmitEditing={(event) => {console.log(this.refs.Second)}} //works fine

为什么我无法调用焦点方法？