在本机TextInput中,无法将autoCorrect转为{false}

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

但是,即使我这样做,自动更正也不会关闭.

我仍然看到这个:

这导致了问题,因为系统通常会用完全不同的词替换整个提及.

我怎么能拒绝自动更正和autoCapitalize 关闭,当用户按下@按钮？"我甚至试过渲染完全不同的东西,但行为仍然存在.

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

然后我按下编辑按钮,它转到:

但它并没有集中精力且键盘没有启动,我寻找并发现了这个链接,之后TextInput没有改变/更新它的一些道具componentDidMount.☹️.另外,它没有区别,iOS或者Android两者都有这个问题,我以后在国家制定之后就把ref重点放在了这个问题上.看下面的代码:TextInputisEditabletrue

<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支柱TextInput变为false并且键盘关闭,所以当我再次按下编辑按钮时,TextInput聚焦和键盘重新启动时带有新autoCorrect值.这是秘密.

解:

您应该执行某些操作,使用新autoCorrect值关闭并再次打开iOS键盘.对于我为你的问题写的测试用例,我决定做一个混合创新的解决方案,使用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

问题不完全在于您的代码（除了在我的设备中不起作用的正则表达式部分），而是如何呈现React Native键盘。
我创建了一个示例，它与您的初始代码一起也会更改backgroundColor屏幕。
您会发现，当输入“@”时，颜色立即发生变化，而键盘则不会。
除非你重装键盘。为此，如果您取消注释代码，它会关闭键盘一次，并且一旦您重新点击textInput新键盘而不进行自动更正并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>
    );
  }

既然现在我们知道错误的主要原因可能是可以达到更好的解决方案。