TL; DR : после закрытия переключателя TextInput autoCorrect вы должны закрыть и перезапустить клавиатуру.
Дружище, это не твоя вина, у меня была такая же проблема на autoFocus из react native TextInput компонента. Я устанавливаю state имя для TextInput editable реквизита, а затем, нажимая кнопку pencil, меняю editable реквизита. После того как TextInput сделал редактируемым, курсор должен быть сфокусирован, дизайнер сказал мне, поэтому я использую состояние isEditable для autoFocus prop, см. Ниже:
state = {
isEditable: false
};
handleEdit = () => {
const { isEditable } = this.state;
this.setState({ isEditable: !isEditable });
};
<TextInput
autoFocus={isEditable}
editable={isEditable}
style={styles.textNameEditable}
defaultValue={text}
numberOfLines={1}
/>
Затем я нажимаю кнопку редактирования, и получается:
Но он не сфокусирован и клавиатура не запускалась, я искал и нашел эту ссылку , TextInput не меняет / обновляет некоторые свои реквизиты после componentDidMount. ☹️. Кроме того, он не отличается в iOS или Android, у них обоих есть эта проблема, я использовал ref, чтобы сфокусироваться на этом TextInput после того, как состояние isEditable установило true. см. следующий код:
<TextInput
editable={isEditable}
style={styles.textNameEditable}
defaultValue={text}
numberOfLines={1}
ref={input => {
this.input = input;
}}
/>
componentDidUpdate() {
const { isEditable } = this.state;
if (isEditable) {
this.input.focus();
}
}
А ваш случай:
Абсолютно нельзя использовать ref, потому что autoCorrect должен отображаться с react native, и это не похоже на focus() и blur(), поэтому JavaScript не может получить к нему доступ.
Я создаю тестовую форму для вашего случая, я создаю еще одну кнопку, например звездочку, для переключения значения autoCorrect рядом с моей кнопкой редактирования. закрашенная звезда означает autoCorrect означает true, а закрашенная звезда означает autoCorrect означает false, теперь см. код области тестирования и вид:
state = {
isEditable: false,
correct: true
};
handleCorrect = () => {
const { correct } = this.state;
this.setState({ correct: !correct });
};
<TextInput
autoCorrect={correct}
editable={isEditable}
style={styles.textNameEditable}
defaultValue={text}
numberOfLines={1}
ref={input => {
this.input = input;
}}
/>
На фотографии выше ясно, что autoCorrect отображается как true, поэтому он включен:
Когда я пишу неправильное персидское слово, автокоррекция показывает свое предложение, теперь пора нажать звездочку:
Ух, autoCorrection - это false в описанной выше ситуации, но мы все равно видим автокоррекцию мобильного телефона. это так же, как autoFocus, это визуализируется при первом рендере, и после него TextInput не может изменить / обновить свои реквизиты. вдруг нажимаю кнопку редактирования:
И я снова нажимаю кнопку редактирования, поэтому, конечно, вы поняли, что autoCorrect - это false сейчас, хорошо, теперь посмотрим, что я увидел:
* * * * * * * * * * * * * * * * false * * * * * * После моего двойного нажатия кнопки редактирования *1108* осталось, и теперь автокоррекция устройства полностью исчезла. Я не знаю, является ли это ошибкой или моим плохим пониманием, но я понял, что для обновления значения autoCorrect мы должны сделать что-то после изменения его значения, чтобы закрыть клавиатуру iPhone и затем снова -запустите это. главное, что выдало TextInput - это запущенная клавиатура.
Для моего теста, когда я нажал кнопку редактирования, editable реквизит TextInput изменился на false, и клавиатура закрылась, поэтому, когда я снова нажал кнопку редактирования, TextInput сфокусировался и клавиатура перезапущен с новым значением autoCorrect. Это Секрет .
Решение:
Вы должны что-то сделать, закрыть и снова открыть клавиатуру iOS с новым значением autoCorrect. для теста, который я написал для вашего вопроса, я решил создать гибридное инновационное решение, используя ref и обратный вызов setState:
handleCorrect = () => {
const { correct } = this.state;
this.input.blur(); //-- this line close the keyboard
this.setState({ correct: !correct },
() => {
setTimeout(() => this.input.focus(), 50);
//-- above line re-launch keyboard after 50 milliseconds
//-- this 50 milliseconds is for waiting to closing keyborad finish
}
);
};
<TextInput
autoCorrect={correct}
editable={isEditable}
style={styles.textNameEditable}
defaultValue={text}
numberOfLines={1}
ref={input => {
this.input = input;
}}
/>
А после нажатия кнопки со звездочкой клавиатура закрывается и перезапускается, а автокоррекция полностью исчезает.
Примечание : очевидно, я суммировал некоторые другие коды, такие как деструктурирование и запись классов или расширений и т. Д. Для лучшей читаемости человеком .