我有一个组件,它包含一个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>
);
}
}
答案 0 :(得分:4)
请参阅有关在文本字段中调用blur
以解除此问题的讨论:
https://github.com/facebook/react-native/issues/113
另外,我刚刚在模拟器上测试了它,即使TextInput具有焦点且键盘已启动,TouchableHighlight肯定会响应。通过添加以下代码:
pressEvent() {
this.refs.textInput.blur();
}
我可以从TouchableHighlight中解除键盘。