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

Question

我已经学会了我可以使用参考文献来实现这一点。但是，当我将一个ref与几个TextInputs一起使用时，我只与最后一个TextInputs一起使用

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>
        );
    }
}

Answer 1

如果至少有一个输入存在（不是有条件呈现的），那么您可以将其设置为焦点，并仅使用一个createref()模糊下一行。

onSwitchPicker = () => {
  this.specialInputRef.current.focus();
  this.specialInputRef.current.blur();
}

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

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

我看到如何使其更短的唯一方法是使用引用数组：

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]} ...}