React Native-TextInput.setNativeProps не вызывает onChange

Я пытаюсь очистить текстовый ввод, используя setNativeProps({ text: '' })который, согласно документации, является обычным способом сделать это-из-за мерцания изменений состояния-однако, я заметил, что onChangeне вызывается, когда setNativePropsвызывается. Для меня это проблема, потому что я использую изменяемый размер TextArea. Мне нужно TextArea сбросить его высоту, что в настоящее время сделано onChange.

Если кто-то может помочь пролить свет на мою проблему, это было бы очень ценно.

Вот компонент

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,
};

Из другого компонента я делаю следующее, Чтобы очистить вход

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

1 ответ

  1. Я все еще не нашел способ для onChange по-прежнему называться, но я нашел решение.

    Решение состояло в том, чтобы создать другую функцию, которая вызовет setNativeProps и сбросит состояние

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

    Из моего другого компонента я мог бы тогда позвонить this.refs.input.resetInputText();и увидеть желаемый результат.