React native 将ref作为函数参数React Native传递

在我当前的代码中，我使用ref在使用

setNativeProps

方法的函数中更改我的

TextInput

组件样式

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

类注册表屏幕扩展组件{
建造师（道具）{
超级（道具）
此.state={
borderBottomStyle:“#f7f7f7”
}
}
focusedInput=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:'#445AE3'}
}) 
}
blurredInput=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:'#f7f7f7'}
}) 
}
render（）{
返回(
{this.textInput=c}}
style={style.textInput}
onFocus={this.focusedInput}
onBlur={this.blurredInput}
style={[style.formInput，{borderBottomColor:this.state.borderBottomStyle}]}
占位符={“电子邮件”}
/>
)
}
}
导出默认注册表屏幕

它与我的第一个

TextInput

配合得很好，但我正在寻找一种方法来为第二个做同样的事情。我首先想到将ref传递给

focusedInput

和

blurredInput

函数作为参数，以指定要修改的元素，但我对ref不太熟悉

有没有办法做到这一点

---

感谢您的帮助

如果我正确理解您的问题，您希望根据聚焦与否有条件地更改文本框的UI

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

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

import React，{Component}来自“React”；
从“react native”导入{View，TextInput}；
类注册表屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
borderBottomStyle:#f7f7f7“，
currentlyFocused:空
};
}
焦点输入=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:#445AE3}
});
};
模糊输入=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:#f7f7f7}
});
};
render（）{
返回(
this.setState（{currentlyFocused:“email”}）
onBlur={（）=>this.setState（{currentlyFocused:}）}
占位符={“电子邮件”}
/>
this.setState（{currentlyFocused:“password”}）
onBlur={（）=>this.setState（{currentlyFocused:}）}
占位符={“密码”}
/>
);
}
}
导出默认注册表屏幕；

如果我正确理解了您的问题，您希望根据聚焦与否有条件地更改文本框的UI

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

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

import React，{Component}来自“React”；
从“react native”导入{View，TextInput}；
类注册表屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
borderBottomStyle:#f7f7f7“，
currentlyFocused:空
};
}
焦点输入=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:#445AE3}
});
};
模糊输入=（）=>{
this.textInput.setNativeProps({
样式：{borderBottomColor:#f7f7f7}
});
};
render（）{
返回(
this.setState（{currentlyFocused:“email”}）
onBlur={（）=>this.setState（{currentlyFocused:}）}
占位符={“电子邮件”}
/>
this.setState（{currentlyFocused:“password”}）
onBlur={（）=>this.setState（{currentlyFocused:}）}
占位符={“密码”}
/>
);
}
}
导出默认注册表屏幕；

谢谢您的回答，它非常有效。我刚刚修改了borderWidth上的三元条件，当为false时，确保始终有一个底部边框。我知道用一些setState可以实现这一点，但我很想了解更多关于REF的情况，因为很难找到好的医生。谢谢你的回答，它工作得很好。我刚刚修改了borderWidth上的三元条件，当为false时，确保始终有一个底部边框。我知道用一些setState可以实现这一点，但我很想了解更多关于refs的情况，因为很难找到关于这一点的好医生。

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;