Question

我正在尝试清除键盘隐藏事件中的Textinput焦点，但我无法获得参考里面的键盘隐藏事件method.i试图打印道具值它也未定义

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}
    />

让我知道如何清除_keyboardDidHide方法上的TextInput焦点。

Answer 1

我不是百分之百确定你在这里要做什么，但我想你至少想要从你的输入中获取信息。

虽然不需要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);
}

至于bluring等，您一定要查看TextInput上的文档：https://facebook.github.io/react-native/docs/textinput.html

此外，我是否可以建议跳转到本身的生命周期文档，并在反应中检查props vs state。一开始这是一个令人困惑的概念，你一定要重温它。

至于模糊输入，只需执行以下操作：

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

然后你可以打电话：

  this.input.blur();

无论你想要什么。

另外，不要忘记在构造函数中绑定_keyboardDidHide回调，或者在将其添加为侦听器回调时，如此

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

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

希望这有帮助

React native props，ref值是否在键盘隐藏事件中未定义？

1 个答案: