Реагировать на родной реквизит, значение ref не определено внутри события скрытия клавиатуры?

Question

Я пытаюсь очистить фокус Textinput внутри события скрытия клавиатуры, но я не могу получить ссылку внутри метода скрытия клавиатуры. я попытался напечатать реквизиты, значение которого также становится неопределенным

constructor (props) {
    this.inputs = {};
}

_keyboardDidHide () {
   console.log("value"+this.props);
   this.inputs['inputValue'].blur();
    }

componentWillMount () {
   this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidHideListener.remove();
   }

<TextInput
            ref={input => {
              this.inputs['inputValue'] = input;
            }}
            autoFocus={true}
            blurOnSubmit={false}
    />

дайте мне знать, как очистить фокус TextInput на метод _keyboardDidHide.

Answer 1

Я не уверен на 100%, что вы пытаетесь сделать здесь, однако я полагаю, что вы хотите, по крайней мере, получить информацию из вашего вклада.

Нет необходимости в этом ref магия там, просто используйте просто реагировать изменения состояния.

class InputWrapper extends React.Component {
  constructor() {
    super();

    this.state = {
      input: ''
    };

    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(input) {
    this.setState({input});
  }

  render() {
    return (
      <TextInput onChangeText={this.handleInput} />
    );
  }
}

Это даст вам компонент TextInput с контролем над вводом. Теперь вы должны добавить componentDidUpdate также метод, который выводит текущее состояние, так что вы можете наблюдать за тем, что происходит, когда вы меняете входное значение.

componentDidUpdate() {
  console.log(this.state);
}

Что касается размывания и тому подобное, вы обязательно должны проверить документацию на TextInput: https://facebook.github.io/react-native/docs/textinput.html

Кроме того, могу ли я предложить перейти к документации по жизненному циклу самой реакции, а также проверить props против state в реакции. В начале это запутанная концепция, и вы обязательно должны вернуться к ней.

---

Что касается размытия ввода, просто сделайте это:

  <TextInput
    ref={input => this.input = input}
  />

И тогда вы можете позвонить:

  this.input.blur();

где угодно.

Кроме того, не забудьте связать свой _keyboardDidHide обратный вызов в вашем конструкторе или при добавлении его в качестве обратного вызова слушателя, например,

this._keyboardDidHide = this._keyboardDidHide.bind(this)

Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));

Надеюсь это поможет