React Native-TextInput.setNativeProps不会触发onChange

Question

I am trying to clear a text input using setNativeProps({ text: '' }) which according to the documentation is a common way to do so -- due to the flickering of state changes -- However, I did notice that onChange is not called when setNativeProps is called. For me, this is an issue because I am using a resizable TextArea. I need the TextArea to reset its height, which is currently done onChange .

If someone can help shed light on my issue it would be much appreciated.

Here is the component

import React, { Component } from 'react';
import {
  TextInput,
} from 'react-native';

export default class Input extends Component {
  constructor() {
    super();
    this.state = {
      height: 35,
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentWillMount() {
    const { defaultHeight } = this.props;

    if (defaultHeight) {
      this.setState({
        height: defaultHeight,
      });
    }
  }

  handleChange(event) {
    console.log(event);
    if (this.state.height !== event.nativeEvent.contentSize.height) {
      this.setState({
        height: Math.max(this.props.defaultHeight, event.nativeEvent.contentSize.height),
      });
    }

    if (this.props.onChange) {
      this.props.onChange(event);
    }
  }

  render() {
    const { style, ...props } = this.props;

    return (
      <TextInput
        ref="input"
        style={[{ height:this.state.height }, style]}
        multiline
        {...props}
        onChange={this.handleChange}
      />);
  }
}

Input.propTypes = {
  style: React.PropTypes.number,
  onChange: React.PropTypes.func,
  defaultHeight: React.PropTypes.number,
};

From my other component, I am doing the following to clear the input

this.refs.input.refs.input.setNativeProps({ text: '' });

Answer 1

I still haven't found a way for onChange to still be called, but i did find a solution.

The solution was to create another function that will call setNativeProps and reset the state

 resetInputText() {
    this.refs.input.setNativeProps({ text: '' });
    this.setState({
      height: this.props.defaultHeight,
    });
  }

From my other component I could then call this.refs.input.resetInputText(); and see the desired result.