Javascript React Native-切换secureTextEntry道具时，文本输入插入符号位置重置

我正在创建一个组件，它应该用作我的应用程序中React Native

TextInput

的包装器。我已经创建了一个可见性切换来显示或不显示密码。当我更改

secureTextEntry

prop时，我的

TextInput

的插入符号位置重置为0

我尝试使用状态来存储插入符号位置，并在打开/关闭

securedTextEntry

属性后，使用

TextInput

组件上的ref调用setNativeProps来热修复该问题

这是我的组件：

export default class AppTextInput extends React.Component<Props, State> 
{
  static defaultProps = {
    defaultValue: '',
    icon: '',
    keyboardType: 'default',
    secureTextEntry: false,
    style: {},
    styleTI: {},
  };


  state = {
    isPasswordHidden: true,
    // State used to track cursor position
    selection: {
      start: 0,
      end: 0,
    },
  };

  // Update state when selection changes
  handleSelectionChange = ({
    nativeEvent: { selection },
  }: {
    nativeEvent: { selection: { start: number, end: number } },
  }) => {
    this.setState(() => ({ selection }));
  };

  tooglePasswordVisibility = () => {
    this.setState(prevState => ({
      isPasswordHidden: !prevState.isPasswordHidden,
    }));
    // Set the caret position back to its previous location and not 0
    this.textInputRef.setNativeProps({
      selection: { start: this.state.selection.start, end: this.state.selection.end },
    });
  };

  // Reference of the TextInput (typed with Flow)
  textInputRef: React.ElementRef<TextInput>;

  render() {
    const {
      callbackFromParent,
      defaultValue,
      icon,
      keyboardType,
      placeholder,
      secureTextEntry,
      style,
      styleTI,
    } = this.props;
    const { isPasswordHidden, selection } = this.state;

    return (
      <View style={{ ...styles.textInputView, ...style }}>
        <Icon color="#000" name={icon} size={20} style={styles.icon} />
        <TextInput
          // Reference of the TextInput
          ref={textInputRef => (this.textInputRef = textInputRef)}
          defaultValue={defaultValue}
          keyboardType={keyboardType}
          onChangeText={text => callbackFromParent(text)}
          // Method to handle selection changes
          onSelectionChange={this.handleSelectionChange}
          placeholder={placeholder}
          placeholderTextColor="black"
          secureTextEntry={secureTextEntry && isPasswordHidden}
          // State to use for the selection
          selection={selection}
          style={{ ...styles.input, ...styleTI }}
          underlineColorAndroid="transparent"
        />
        {secureTextEntry && (
          <Icon
            color="#000"
            name={isPasswordHidden ? 'eye' : 'eye-off'}
            onPress={this.tooglePasswordVisibility}
            size={20}
            style={styles.icon}
          />
        )}
      </View>
    );
  }
}

导出默认类AppTextInput扩展React.Component
{
静态defaultProps={
默认值：“”，
图标：“”，
键盘类型：“默认值”，
secureTextEntry:false，
样式：{}，
styleTI:{}，
};
状态={
isPasswordHidden:对，
//用于跟踪光标位置的状态
选择：{
起点：0，
完:0,，
},
};
//选择更改时更新状态
handleSelectionChange=({
nativeEvent:{selection}，
}: {
nativeEvent:{选择：{开始：编号，结束：编号}，
}) => {
this.setState（（）=>（{selection}））；
};
tooglePasswordVisibility=（）=>{
this.setState（prevState=>({
isPasswordHidden:！prevState.isPasswordHidden，
}));
//将插入符号位置设置回其以前的位置，而不是0
this.textInputRef.setNativeProps({
选择：{start:this.state.selection.start，end:this.state.selection.end}，
});
};
//TextInput的引用（使用流键入）
textInputRef:React.ElementRef；
render（）{
常数{
callbackFromParent，
默认值，
偶像
键盘式，
占位符，
secureTextEntry，
风格
斯泰尔蒂，
}=这是道具；
const{isPasswordHidden，selection}=this.state；
返回(
（this.textInputRef=textInputRef）}
defaultValue={defaultValue}
keyboardType={keyboardType}
onChangeText={text=>callbackFromParent（文本）}
//方法来处理选择更改
onSelectionChange={this.handleSelectionChange}
占位符={占位符}
占位符textcolor=“黑色”
secureTextEntry={secureTextEntry&&isPasswordHidden}
//要用于选择的状态
选择={selection}
style={{…styles.input，…styleTI}
underlineColorAndroid=“透明”
/>
{secureTextEntry&&(
)}
);
}
}

我在Facebook的GitHub上撞到了某人的公关，这是为0.59.5版的realease所做的一次精心挑选！修正错误

我在Facebook的GitHub上撞到了某人的公共关系，0.59.5版的realease已经做了一次完美的选择！修正错误

在react native GitHub上也发现此问题。。。在react native GitHub上也发现此问题。。。