无法在本机TextInput中将autoCorrect设置为{false} [英] Cannot turn autoCorrect to {false} in react native TextInput

问题描述

在我的TextInput更改文本上，我检测到用户是否按下@按钮进行提及.

On my TextInput change text, I detect whether the user pushed the @ button for mentions.

onChangeText(text){
    const suggestTrigger = text.match(/\B@[A-Za-z0-9]*$/i) //grab "@" trigger
    const searchQuery = (suggestTrigger && suggestTrigger.length > 0) ? suggestTrigger[0] : null;
    this.setState({
        searchQuery: searchQuery
    })
}

然后，在我的渲染中，做:

Then, in my render, I do:

<TextInput 
    autoCapitalize={this.state.searchQuery ? "none" : "sentences"}
    autoCorrect={this.state.searchQuery ? false : true}
    onChangeText={this.onChangeText}
/>

但是，即使执行此操作，自动更正也不会 关闭.

However, even when I do this, the autoCorrect does not turn off.

我仍然看到这个:

这引起了问题，因为通常系统会用一个完全不同的词替换整个提及.

This is causing problems because oftentimes the system replaces the entire mention with a different word altogether.

当用户按下@按钮时，如何关闭自动更正和自动大写 ? ' 我什至尝试渲染完全不同的图片，但是行为仍然存在.

How can I turn autoCorrect and autoCapitalize off when the user pushes the @ button? ' I have even tried rendering an entirely different , but the behavior remains.

推荐答案

TL; DR :在TextInput autoCorrect切换值.

伙计，这不是您的错，我在react native TextInput组件的autoFocus上遇到了相同的问题.我为TextInput editable道具设置了state名称，然后通过按pencil按钮更改editable道具.在TextInput变为可编辑状态后，设计师告诉我应该将光标对准焦点，因此我将isEditable状态用于autoFocus道具，请参见下文:

Buddy, this is not your fault, I had the same issue on autoFocus of react native TextInput component. I set a state name for the TextInput editable prop and then with the pressing pencil button I change the editable props. The designer told me after the TextInput made editable the cursor should be focused, so I use the isEditable state for autoFocus prop, see below:

state = {
  isEditable: false
};

handleEdit = () => {
  const { isEditable } = this.state;
  this.setState({ isEditable: !isEditable });
};

<TextInput
  autoFocus={isEditable}
  editable={isEditable}
  style={styles.textNameEditable}
  defaultValue={text}
  numberOfLines={1}
/>

然后我按下编辑按钮，它变成:

Then I press the edit button and it turns to:

但是它并没有聚焦并且键盘没有启动，我寻找并找到了此链接，即在componentDidMount之后不会更改/更新其某些道具. ☹️另外，在iOS或Android中也没有什么不同，它们都存在此问题，在isEditable状态设为true之后，我使用ref专注于此TextInput.请参阅以下代码:

But it is not focused and the Keyboard didn't launch, I sought and found this link, the TextInput does not change/update some of its props after componentDidMount. ☹️. Also, it is not different in iOS or Android, both of them has this issue, I used ref to focus on this TextInput after the isEditable state made true. see following code:

<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无法访问它.

And your case:

Absolutely you can not use ref because the autoCorrect should render with react native and it is not like focus() and blur() so JavaScript cannot access to it.

我为您的情况制作了一个测试形状，我在编辑按钮旁边创建了另一个按钮，例如星形，用于切换autoCorrect值.实心星形表示autoCorrect为true，而带衬线的星形表示autoCorrect为false，现在查看测试区号并查看:

I make a test shape for your case, I create another button like a star for toggling autoCorrect value alongside my edit button. the filled star means autoCorrect is true and the lined star means autoCorrect is false, now see the test area code and view:

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，因此已启用:

In the above photo, it is so clear the autoCorrect rendered as true, so it is enabled:

当我输入错误的波斯语单词时，自动更正会显示其建议，现在该按星号按钮了:

When I write a wrong Persian word the auto-correction show its suggestion, now time to press the star button:

哇，在上述情况下，autoCorrection是false，但是我们仍然可以看到手机的自动校正功能.就像autoFocus一样，它是在第一个渲染中渲染的，之后，TextInput无法更改/更新其道具.突然我按下编辑按钮:

Wow, the autoCorrection is false in the above situation but still we see the auto-correction of the cellphone. it is just like autoFocus it is rendered in the first render and after it, the TextInput could not change/update its props. suddenly I press edit button:

然后我再次按下编辑按钮，所以可以肯定的是，您意识到autoCorrect现在是false，好了，现在看看我所看到的:

And I press the edit button again, so surely, you realized the autoCorrect is false now, ok now see what I saw:

通过双击编辑按钮，autoCorrect保持为false，现在设备的自动校正功能完全消失了.我不知道这是一个错误还是我的误解，但我意识到在此测试区域中，为了更新 autoCorrect 值，我们应该在更改其值后执行以下操作以关闭iPhone键盘，然后重新启动. TextInput发出的主要内容是已启动的键盘.

The autoCorrect remained false by my double pressing edit button and now the auto-correction of device disappears completely. I don't know it is a bug or my bad understanding but I realized in this test area, for update autoCorrect value, we should do something after changing its value to close the iPhone keyboard and then re-launch it. the main thing that TextInput has issued is the launched keyboard.

对于我的测试，当我按下编辑按钮时，TextInput的editable道具更改为false并关闭了键盘，因此当我再次按下编辑按钮时，TextInput会得到聚焦并键盘重新发布具有新的autoCorrect值. 这是秘密 .

For my test, when I pressed the edit button the editable prop of the TextInput is changed to false and the keyboard is closed, so when I pressed the edit button again, the TextInput get focused and keyboard re-launched with new autoCorrect value. This is The Secret.

您应该执行一些操作，以使用新的autoCorrect值关闭并再次打开iOS键盘.对于我为您的问题编写的测试用例，我决定使用ref和setState的回调做一个混合的创新解决方案:

You should do something, to close and open again the iOS keyboard with the new autoCorrect value. for the test case that I wrote for your question, I decided to do a hybrid innovative solution, using ref and the callback of 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;
  }}
/>

按下星号按钮后，键盘关闭并重新启动，自动校正完全消失.

And after pressing the star button the keyboard close and re-launch and the auto-correction disappear completely.

注意:很明显，我总结了一些其他代码，例如，销毁和编写类或扩展等，以提高人类可读性..

这篇关于无法在本机TextInput中将autoCorrect设置为{false}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！