Как я могу использовать одну ссылку с несколькими TextInput (реагировать)

Question

Я хочу расфокусировать весь свой TextInput, когда я нажимаю на TouhableOpacity.

Я узнал, что могу использовать refs для этого. Но когда я использую одну ссылку с несколькими TextInputs, я получил такое поведение только с последним 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>
        );
    }
}

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

Тогда иногда у вашего пользователя будут случаи, когда фокус остается в поле (я все еще не знаю в чем смысл, но думаю, это должно каким-то образом повлиять на пользовательский интерфейс). Но это может быть трудно воспроизвести, если пользователь не уловит все условия.