如何解决点击按钮时如何失去 TextFiled 的焦点?
我在 TextInput
中有一个 TouchableOpacity
和 ScrollView
,如下所示,
<ScrollView keyboardShouldPersistTaps={'handled'}>
<TextInput
placeholder='Text'
value={this.state.value}
onChangeText={value => this.setState({ value })}
onBlur={() => console.log('TextInput lost it's focus)}
/>
<TouchableOpacity onPress={() => console.log('This Onpress action opens a modal')}>
<Text>Tap Here</Text>
</TouchableOpacity>
</ScrollView>
在 TextInput
中输入数据后,如果我点击 TouchableOpacity
,那么 Modal
会根据登录打开(我在这里没有提到)。关闭 Modal
后,TextInput
仍然是焦点。
但我希望 TextInput
在我点击 TouchableOpacity
时立即失去焦点。如果我点击除 onBlur
之外的任何其他位置,则会调用 ToucahbleOpacity
函数。
如何让 TextField
在点击 TouchableOpacity
时失去焦点?
注意:我不能使用引用,因为我在使用 Redux Form
时,这里有除上述之外的多个字段,并且这些字段可能会因屏幕而异。
解决方法
您可以在 relation_2
上添加 ref="input"
并在单击 TextInput
时调用 this.refs.input.blur()
。类似的东西:
TouchableOpacity
编辑:
如果您使用 <ScrollView keyboardShouldPersistTaps={'handled'}>
<TextInput
ref="input"
placeholder='Text'
value={this.state.value}
onChangeText={value => this.setState({ value })}
onBlur={() => console.log('TextInput lost it's focus)}
/>
<TouchableOpacity onPress={() => {
this.refs.input.blur(); //<-- here blur the TextInput
console.log('This Onpress action opens a modal');
}}>
<Text>Tap Here</Text>
</TouchableOpacity>
</ScrollView>
,则必须在 Redux Form
中使用回调函数,然后调用 ref
以获取 ReactDOM.findDOMNode
。类似:
TextInput
,
我假设您使用的是函数式组件,因此您可以通过获取 ref 和使用 useRef 钩子来实现这一点。
示例
const componentName = ({ params }) => {
const textInputRef = useRef(); // initialising ref hook
return (
<ScrollView keyboardShouldPersistTaps={'handled'}>
<TextInput
ref={textInputRef} // passing ref to textinput
placeholder="Text"
value={this.state.value}
onChangeText={value => this.setState({ value })}
/>
<TouchableOpacity
onPress={() => {
textInputRef.current.blur(); //<-- by taking ref calling blur function of textinput.
console.log('This Onpress action opens a modal');
}}
>
<Text>Tap Here</Text>
</TouchableOpacity>
</ScrollView>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。