Question

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

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

然后，在渲染中，我做

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

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

我仍然看到这个：

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

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

Answer 1

TL; DR ：您应该在TextInput autoCorrect切换值之后关闭并重新启动键盘。

伙计，这不是您的错，我在autoFocus react native组件的TextInput上遇到了同样的问题。我为state TextInput道具设置了editable名称，然后按下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}
/>

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

但是它没有聚焦并且键盘没有启动，我寻找并发现this link，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，好了，现在看看我看到了什么：

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

为进行测试，当我按下编辑按钮时，editable的{{1}}道具变为false并关闭了键盘，因此当我再次按下编辑按钮时，{{1 }}集中精力，并以新的TextInput值重新启动键盘。 这是秘密 。

解决方案：

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

ref

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

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

Answer 2

问题不完全在您的代码中（正则表达式部分在我的设备中不起作用），但本机如何渲染键盘。
我创建了一个示例，并与您的初始代码一起更改了屏幕的背景色。
您会发现，输入'@'时颜色会立即改变，而键盘没有输入。
除非您重新加载键盘。为此，如果您取消注释该代码，则它将关闭键盘，并且一旦您在文本上点按一次，将显示没有自动更正和自动大写的新键盘。

    state = {
    searchQuery: null,
    isFocused: true,
  }
  constructor(props) {
    super(props);
    this.onChangeText = this.onChangeText.bind(this);
}

onChangeText = (val) => {
  const suggestTrigger = val.match(/@[A-Za-z0-9]*$/i) //grab "@" trigger
  const searchQuery = (suggestTrigger && suggestTrigger.length > 0) ? suggestTrigger[0] : null;
  // Un comment this to reload
  // if(searchQuery && this.state.isFocused) {
  //   this.setState({
  //     isFocused: false
  // });
  // Keyboard.dismiss();
  //   // this.myTextInput.focus()
  // }
  this.setState({
      searchQuery: searchQuery
  })
}
  render() {
    const { searchQuery } = this.state
    return (
      <View style={[styles.container,
        {
        backgroundColor: searchQuery ? "red": "green"}
      ]}>
        <TextInput 
        style={{width: 300, height: 50, borderWidth: 1}}
        ref={(ref)=>{this.myTextInput = ref}}
          autoCapitalize={searchQuery ? "none" : "sentences"}
          autoCorrect={searchQuery ? false : true}
          onChangeText={this.onChangeText}
        />
      </View>
    );
  }

由于现在我们知道错误的主要原因，也许可以找到更好的解决方案。

Answer 3

我有2条建议：首先，您是否尝试过使用自动更正后备功能？

spellCheck={this.state.searchQuery ? false : true}

第二，您是否尝试过使用本机代码（Obj-C / Swift）？

import { Platform, TextInput, View } from 'react-native';
import { iOSAutoCorrect } from './your-native-code';

const shouldWork = Platform.OS === 'ios' ? <iOSAutoCorrect /> : <TextInput 
autoCapitalize={this.state.searchQuery ? "none" : "sentences"}
autoCorrect={this.state.searchQuery ? false : true}
onChangeText={this.onChangeText} />

return (<View>{shouldWork}</View>);

在iOSAutoCorrect中，您应该使用UITextView。然后根据您的条件设置适当的值：

textField.autocorrectionType = UITextAutocorrectionTypeNo; // or UITextAutocorrectionTypeYes

我已经自由编码，因此该代码未经测试，可能包含错误。祝你好运。

无法在本机TextInput中将autoCorrect设置为{false}

3 个答案:

还有你的情况：

解决方案：