传递ref作为函数参数React Native

debugcn 发表于 Dev

布林托

在当前代码中，我使用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传递给focusedInputandblurredInput函数作为参数，以指定要修改的元素，但是我对ref不太熟悉。

有办法实现吗？

谢谢你的帮助

新开发者

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

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

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

演示沙箱链接

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",
              borderStyle: "solid",
              borderWidth: this.state.currentlyFocused === "password" ? 3 : 0,
              height: 50,
              marginTop: 20
            }}
            onFocus={() => this.setState({ currentlyFocused: "password" })}
            onBlur={() => this.setState({ currentlyFocused: "" })}
            placeholder={"Password"}
          />
        </View>
      </View>
    );
  }
}

export default RegisterScreen;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。