无法将autoCorrect转换为{false}以响应本机TextInput

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

但是，即使我这样做，autoCorrect也不会关闭。

我仍然看到这个：

​

​

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

当用户按下autoCorrect按钮时，我如何关闭autoCapitalize和@？我甚至尝试渲染一个完全不同的，但行为仍然存在。

Answer 1

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

伙计，这不是你的错，我在autoFocus of react native TextInput组件上也有同样的问题。我为TextInput editable道具设置了一个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}
/>

​

​

然后按下编辑按钮，它转到：

​

​

但它没有集中精力，键盘也没有启动，我寻找并找到了this link，TextInput不会在componentDidMount之后改变/更新它的一些道具。☹️。另外，在iOS或Android中也没有什么不同，它们都有这个问题，在isEditable状态生成true之后，我使用ref来关注这个TextInput。见以下代码：

<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发布的主要内容是启动的键盘。

对于我的测试，当我按下编辑按钮时，TextInput的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;
  }}
/>

​

​

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

​

​

注意到：显然，为了更好的人类可读性，我总结了其他一些代码，如析构和编写类或扩展等等。

Answer 2

问题不在您的代码中(除了Regex部分，它在我的设备中没有工作)，而是React Native是如何呈现键盘的。

我创建了一个示例，它与初始代码一起也更改了屏幕的backgroundColor。

你会发现，当“@”被输入时，颜色会立即改变，而键盘则不会。

除非你重新加载键盘。为此，如果您取消注释的代码，它解雇键盘一次，一旦你点击textInput，新的键盘没有autoCorrect和autoCapitalize显示。

    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

我有两个建议:首先，您是否尝试过使用autoCorrect回退？

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

其次，您尝试过使用本机代码(Obj/ 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

我有免费编码，因此代码是未经测试的，可能包含错误。