Ответ 1
TL; DR: вы должны закрыть и перезапустить клавиатуру после autoCorrect переключения autoCorrect TextInput.
Дружище, это не твоя вина, у меня возникла та же проблема с autoFocus react native компонента TextInput. Я устанавливаю имя state для editable реквизита TextInput а затем pencil кнопку pencil меняю editable реквизиты. Дизайнер сказал мне после того, как TextInput редактируемого курсор должен быть сфокусирован, поэтому я использую isEditable состояние для autoFocus опоры, см ниже:
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 состояние 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 звезда означает, что 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 кнопку редактирования, так что, конечно, вы поняли, что autoCorrect теперь false, хорошо, теперь посмотрим, что я видел:
autoCorrect осталась false при двойном нажатии кнопки редактирования, и теперь автокоррекция устройства полностью исчезает. Я не знаю, является ли это ошибкой или моим плохим пониманием, но я понял, что в этой области тестирования для обновления значения 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;
}}
/>
А после нажатия звездочки клавиатура закрывается и перезапускается, а автокоррекция полностью исчезает.
Примечание: очевидно, я суммировал некоторые другие коды, такие как деструктурирование и написание классов или расширений и т.д. Для лучшей читаемости человеком