Question

问题

我的文本输入存在于单独的组件中，因为我的应用程序是数据驱动的。父级拥有一组信息，将其传递给子级，子组件构建组件。在尝试实施＆＃39; Next＆＃39;按钮专注于下一个文本输入，键盘开始隐藏动画，然后弹出备份。

我尝试过的事情

我已经看过使用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

将焦点放在生活在单独子组件中的文本输入时，键盘不会持久

1 个答案: