提交后如何让 React Native TextInput 保持焦点？

Question

I could explain what I am trying to do, but this ReactJS example is a walkthrough of exactly what I want. The problem is I can't figure out what the equivelant would be for react native.

Basically, when I press return in the TextInput, I want the text cleared and focus maintained.

Any thoughts?

Answer 1

I've submitted a PR with a blurOnSubmit property.

Set it to false and the TextInput never blurs, onSubmitEditing still fires though.

Hopefully it gets merged. :)

https://github.com/facebook/react-native/pull/2149

Answer 2

I came out with following (working) solution:

var NameInput = React.createClass({
  getInitialState() {
    return {
      textValue: ''
    }
  },

  clearAndRetainFocus: function(evt, elem) {
    this.setState({textValue: elem.text});
    setTimeout(function() {
      this.setState({textValue: this.getInitialState().textValue});
      this.refs.Name.focus();
    }.bind(this), 0);
  },

  render() {
    return(
      <TextInput
        ref='Name'
        value={this.state.textValue}
        onEndEditing={this.clearAndRetainFocus} />
    )
  }
});

So, basically when we end editing, we will set the textValue state to the value of the TextInput and right after that (in setTimeout ), we switch it back to default (empty) and retain focus on the element.

Answer 3

I don't know how to trigger blurOnSubmit but if you do and it works you should do that. Another thing I found that works with a functional react component in a chat application i am making is this:

... import statments

const ChatInput = props => {
const textIn = React.useRef(null) //declare ref
useEffect(()=>textIn.current.focus()) //use effect to focus after it is updated

const textInputChanged = (text) =>{
    props.contentChanged(text);
}

const submitChat = () =>{
    const txt = props.content.trim()
    txt.length >0 ?  props.sendChat(txt, props.username) : null;
}

const keyPressEvent = (e) =>{
   return e.key == 'Enter'? submitChat() : null;
}

return (
     
        <TextInput 
        style={styles.textInput}
        keyboardType={props.keyboardType}
        autoCapitalize={props.autoCapitalize}
        autoCorrect={props.autoCorrect}
        secureTextEntry={props.secureTextEntry}
        value={props.content}
        onChangeText={textInputChanged}  
        onKeyPress={keyPressEvent}
        autoFocus={true}  //i don't think you need this since we are using useEffect
        ref={textIn} //make it so this is the ref
    />
   )}
... export default react-redux connect stuff

if you have more inputs you can probably do some sort of ref choosing logic in the useEffect hook

this is the article that helped me figure it out, it's almost the same thing: https://howtocreateapps.com/how-to-set-focus-on-an-input-element-in-react-using-hooks/