javascript - react native :How to trigger TextInput instance blur in a method?

Question

我单击导航器上的一个按钮，当前屏幕的一个 TextInput 是焦点。我需要设置 TextInput 的实例模糊以触发 textChange 函数来执行某些操作。

在我的例子中，TextInput 的光标一直在闪烁。

refs.username.blur() 不起作用。

我的代码:

class UploadRecordII extends Component{
  static navigationOptions = ({ navigation, screenProps }) => ({
    headerRight: (<Button containerStyle={{marginRight: 12,}} onPress={ UploadRecordII.onSubmit}>
                  <Text style={{color: 'white',fontSize: 18,}}>next</Text>
                </Button>),
  });
.....


   static onSubmit() {
    let that = UploadRecordII.instance;
     debugger;
     that.refs.username.blur();
     debugger;
    that.props.commitCreateRecordUpdate(that.refs.username._lastNativeText,that.imageList)
    that.props.navigation.navigate('Record3');
  }



......  in render(){
....

<TextInput ref = 'username' placeholder='' editable = {true} maxLength = {500}
                  keyboardType='default' multiline={true}
                  style={styles.input} underlineColorAndroid='rgba(0,0,0,0)'
                           onBlur={  ()=> this.textChange()}
                  clearButtonMode='always' placeholderTextColor='#D6D0D8'></TextInput>



...
}

Answer 1

refs 不再像预期的那样作为字符串工作。您需要定义您的引用，例如

class UploadRecordII extends Component {
  constructor(props) {
    super(props);

    this.usernameInput = null;
  }

  onSubmit() {
    this.usernameInput.blur();
  }

  render() {
    return (
    <TextInput ref={(input) =>  this.usernameInput = input} ... />
    )
  }
}