React Native-无法在Android上的TextInput onChangeText回调中修改文本

Question

Because of a well-documented issue in React Native, autoCapitalize for TextInput doesn't work correctly on Android. I tried to get around this by manually capitalizing the text in the onChangeText() callback:

onchgtext(newval)
{
  this.s8 = newval.toUpperCase();
  this.forceUpdate();
}

render()
{
   ...
   <TextInput value={ this.s8 } 
      onChangeText={ (newval) => { this.onchgtext(newval) } } 
      ...
   />
   ...
}

Unfortunately, modifying the text causes the TextInput to not work correctly: alternate keystrokes cause the entire previous text to be duplicated, but only if the keystroke was lowercase.

So, entering 1234 results in 1234 showing up; entering ABCD results in ABCD showing up; but entering abcd results in AABCAABCD .

Any ideas why this happens, and how to work around it? Note that using onChange rather than onChangeText results in the same behavior.

Answer 1

Could you try something like this, using state?

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { text: 'Text' };
  }
  render() {
    return (
      <View>
        <TextInput
          onChangeText={(text) => {
            this.setState({ text: text.toUpperCase() });
          }}
          value={this.state.text}
        />
      </View>
    );
  }
}