当将焦点放在位于单独子组件中的文本输入时，键盘不会保留

Question

问题

由于我的应用程序是数据驱动的，所以我的文本输入存在于单独的组件中。父组件持有一个信息数组，将其传递给子组件，子组件构建组件。当试图实现"下一步"按钮以专注于下一个文本输入时，键盘开始隐藏动画，然后弹出。

我尝试了什么

我看过使用blurOnSubmit={false}的facebook文档，但是当文本输入存在于单独的组件中时，它似乎不起作用。

潜在解决方案

也许会设置一个反跳来暂停隐藏动画，但我不确定在本地模块中在哪里或如何进行

某些代码

这通常是我正在做的：

Object.keys(objectOfInputs).map((input, index) => {
return <ChildComponent input={input} />;
}

我的子组件现在每行都有一个文本输入：

class ChildComponent extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.focusedInput === nextProps.optionId) {
this.textInput.focus();
}
if (nextProps.focusedInput === null) {
this.textInput.blur();
}
}
render() {
<View>
<TextInput 
showNextButton // I added this via a github solution from facebook
keyboardType={'number-pad'}
style={styles.someStyles}
onChangeText={userInput => updateStateWithInput(userInput)}
value={inputValue}
onFocus={event => this.handleFocus(ReactNative.findNodeHandle(event.target))}
onSubmitEditing={() => focusNext(optionId)}
blurOnSubmit={false}
/>
</View>
}
}

该组件当前将状态设置为聚焦输入，并将其传递给子级，以便子级知道是否应该聚焦。

class CalculatorSectionContainer extends Component {
constructor(props) {
super(props);
this.state = {
focusedInput: null,
options: Object.keys(this.props.sectionInfo.options).filter((option) => {
return this.props.sectionInfo.options[option].type === 'input';
}),
};
this.focusNext = this.focusNext.bind(this);
this.focusCurrent = this.focusCurrent.bind(this);
}
focusNext(optionId) {
this.state.options.every((option, index) => {
if (option === optionId) {
if (!this.state.options[index + 1]) {
return false;
}
this.setState({
focusedInput: this.state.options[index + 1],
});
return false;
}
this.setState({
focusedInput: null,
});
return true;
});
}

Answer 1

更新为React Native 0.40。将焦点更改为其他TextInput时，它将保留键盘

来源：https://github.com/facebook/react-native/commit/552c60192172f6ec503181c060c08bbc5cbcc5a4