键盘打开时,TouchableHighlight不接受新闻事件

时间:2015-06-12 19:19:42

标签: javascript reactjs react-native

我有一个组件,它包含一个TextInput和一个TouchableHighlight并排。您点击文本框,键入所需内容,然后点击添加按钮进行保存。现在问题是键盘打开键盘,你需要解雇它,否则按钮不会响应。如果我先点击按钮,键盘就会被解除,然后第二次点击就可以了。我觉得我应该能够同时做到这两点。这是我的渲染组件:

class FormInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: null
    };
  }
  componentDidMount() {
    this.refs.textInput.focus();
  }

  _changeTextEvent(event) {
    this.setState({
      text: event.nativeEvent.text
    });
  }

  render() {
    var style = [styles.textBox];
    if (this.props.errors.length > 0) {
      style.push(styles.errorTextBox);
    }
    var errors = null;
    if (this.props.errors.length > 0) {
      errors = this.props.errors.map((msg) => {
        return (<Text style={styles.errorLabel}>{msg}</Text>);
      });
    }
    return (
      <View>
        <View style={styles.container}>
          <TextInput
            ref='textInput'
            style={style}
            onChange={this._changeTextEvent.bind(this)}
            autoFocus={true}
          />
          <TouchableHighlight underlayColor="#96DBFF" style={styles.addButton} onPress={() => { this.props.pressEvent(this.state.text) }}>
            <Text style={styles.addButtonText}>Add</Text>
          </TouchableHighlight>
        </View>
        <View>{errors}</View>
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:4)

请参阅有关在文本字段中调用blur以解除此问题的讨论:

https://github.com/facebook/react-native/issues/113

另外,我刚刚在模拟器上测试了它,即使TextInput具有焦点且键盘已启动,TouchableHighlight肯定会响应。通过添加以下代码:

pressEvent() {
    this.refs.textInput.blur();
}

我可以从TouchableHighlight中解除键盘。