当点击按钮时如何失去textfield的焦点?

Question

我在ScrollView里面有一个TextInput和TouchableOpacity，如下所示，

<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的时候失去焦点。如果我点击ToucahbleOpacity以外的任何地方，onBlur函数将被调用。

如何使TextField在点击TouchableOpacity时失去焦点?

注意:我不能使用引用，因为我使用Redux Form，那里有许多字段，而不是上面提到的，这些字段可能会动态地改变屏幕。

Answer 1

我假设你使用的是函数式组件，所以你可以通过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>
);
};

Answer 2

您可以在TextInput上添加ref="input"，并在单击TouchableOpacity时调用this.refs.input.blur()。比如:

<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.类似:

<ScrollView keyboardShouldPersistTaps={'handled'}>
<TextInput
ref={(input) => { this.input = input; }}
placeholder='Text'
value={this.state.value}
onChangeText={value => this.setState({ value })}
onBlur={() => console.log('TextInput lost it's focus)}
/>
<TouchableOpacity onPress={() => {
ReactDOM.findDOMNode(this.input).blur(); //<-- here blur the TextInput
console.log('This Onpress action opens a modal');
}}>
<Text>Tap Here</Text>
</TouchableOpacity>
</ScrollView>