Reactjs 如何将单个ref与多个TextInput一起使用（react native）

我想在点击Touble时取消所有TextInput的焦点

我知道我可以使用参考文献来实现这一点。但是，当我将单引用与多个文本输入一起使用时，我只在最后一个文本输入中得到了这种行为

class UserRegister extends React.Component<any, State> {
    private inputRef: React.RefObject<TextInput>;

    constructor(props:any) {
        super(props);
        //some code
        this.inputRef = React.createRef();
    }

    onSwitchPicker = () => {
        if (this.inputRef.current) {
            this.inputRef.current.blur();
        }

        //some code
    }

    render() {
        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <TextInput
                    ref={this.inputRef}
                    //other params
                />

                <TextInput
                    ref={this.inputRef}
                    //other params
                />

                <TouchableOpacity
                    onPress={this.onSwitchPicker}
                    //other params
                >
                //some code
                </TouchableOpacity>

                // some code
            </KeyboardAvoidingView>
        );
    }
}

类UserRegister扩展React.Component{ 私有输入：React.reObject； 构造器（道具：任何）{ 超级（道具）； //一些代码 this.inputRef=React.createRef（）； } onSwitchPicker=（）=>{ if（此.inputRef.current）{ this.inputRef.current.blur（）； } //一些代码 } render（）{ 返回( //一些代码 //一些代码 ); } }

---

如果至少存在一个输入（不是有条件地呈现），那么您可以使用single

createRef（）

将其设置为聚焦并模糊下一行

不确定是否会在React Native中滚动屏幕。如果它滚动-这绝对是糟糕的用户体验-您可以有N个参考：

onSwitchPicker = () => {
  this.inputRef1.current.blur();
  this.inputRef2.current.blur();
  this.inputRef3.current.blur();
  this.inputRef4.current.blur();
}

我了解如何缩短它的唯一方法是使用ref数组：

constructor(props) {
 super(props);
 this.inputRefs = new Array(10).fill().map(() => React.createRef());
}

onSwitchPicker = () => {
  this.inputRefs.forEach(({ current }) => {
    if (current) current.blur();
  });
}

render() {
....
 <input ref={this.inputRefs[0]} ...
...
 <input ref={this.inputRefs[1]} ...
...
 <input ref={this.inputRefs[11]} ...
....

构造函数（道具）{
超级（道具）；
this.inputRefs=新数组（10.fill（）.map（（）=>React.createRef（））；
}
onSwitchPicker=（）=>{
this.inputRefs.forEach（（{current}）=>{
if（current）current.blur（）；
});
}
render（）{
....
你的目标是吗？不是。我的目标是隐藏另一个组件。为什么你要模糊输入？很难解释为什么：）让我们假设它非常重要）
constructor(props) {
 super(props);
 this.inputRefs = new Array(10).fill().map(() => React.createRef());
}

onSwitchPicker = () => {
  this.inputRefs.forEach(({ current }) => {
    if (current) current.blur();
  });
}

render() {
....
 <input ref={this.inputRefs[0]} ...
...
 <input ref={this.inputRefs[1]} ...
...
 <input ref={this.inputRefs[11]} ...
....

{someCondition && <input ref={this.inputRefs[4]} ...}
....
{someOtherCondition && <input ref={this.inputRefs[4]} ...}