问题描述
我在 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>
);
};