传递ref作为函数参数React Native

如何解决传递ref作为函数参数React Native

在当前代码中，我使用ref来更改使用TextInput方法的函数中的setNativeProps组件样式。

class RegisterScreen extends Component {
    constructor(props) {
        super (props)
        this.state = {
            borderBottomStyle: '#f7f7f7'
        }
    }

    focusedInput = () => { 
        this.textInput.setNativeProps({
            style: { borderBottomColor: '#445AE3' }
        }) 
    }
    
    blurredInput = () => { 
        this.textInput.setNativeProps({
            style: { borderBottomColor: '#f7f7f7' }
        }) 
    }

    render() {
        return (
            <View style={styles.container} >
               <View style={styles.form}>
                    <TextInput
                        ref={c => { this.textInput = c}} 
                        style={styles.textInput}
                        onFocus={this.focusedInput}
                        onBlur={this.blurredInput}
                        style={[styles.formInput,{ borderBottomColor: this.state.borderBottomStyle }]}
                        placeholder={"Email"}
                    />
                    <TextInput
                        style={[styles.formInput,{ borderBottomColor: this.state.borderBottomStyle }]}
                        placeholder={"Password"}
                    />
               </View>
            </View>
        )
    }
}

export default RegisterScreen

它与我的第一个TextInput一起使用时效果很好，但是我正在寻找一种方法来对第二个做同样的事情。我首先想到将ref作为参数传递给focusedInput和blurredInput函数，以指定要修改的元素，但是我对refs不太熟悉...

有没有办法实现这一目标？

谢谢您的帮助

解决方法

如果我正确理解了您的问题，则希望根据是否关注焦点有条件地更改文本框的用户界面。

您可以只使用一种状态来保留currentFocused textInput名称，并根据currentFocused框有条件地更改文本框的UI。

我在沙盒上做了一个快速演示。请看下面的链接。

Demo Sandbox link

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

class RegisterScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      borderBottomStyle: "#f7f7f7",currentlyFocused: null
    };
  }

  focusedInput = () => {
    this.textInput.setNativeProps({
      style: { borderBottomColor: "#445AE3" }
    });
  };

  blurredInput = () => {
    this.textInput.setNativeProps({
      style: { borderBottomColor: "#f7f7f7" }
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View>
          <TextInput
            style={{
              borderBottomColor:
                this.state.currentlyFocused === "email" ? "red" : "grey",borderStyle: "solid",borderWidth: this.state.currentlyFocused === "email" ? 3 : 0,height: 50,marginTop: 20
            }}
            onFocus={() => this.setState({ currentlyFocused: "email" })}
            onBlur={() => this.setState({ currentlyFocused: "" })}
            placeholder={"Email"}
          />
          <TextInput
            style={{
              borderBottomColor:
                this.state.currentlyFocused === "password" ? "red" : "grey",borderWidth: this.state.currentlyFocused === "password" ? 3 : 0,marginTop: 20
            }}
            onFocus={() => this.setState({ currentlyFocused: "password" })}
            onBlur={() => this.setState({ currentlyFocused: "" })}
            placeholder={"Password"}
          />
        </View>
      </View>
    );
  }
}

export default RegisterScreen;