2017-01-28 31 views
0

的問題鍵盤不能堅持

我有一個住在單獨的組件,因爲我的應用是數據驅動的文本輸入。父級擁有一組信息,將其傳遞給子級,而子級組件則構建組件。當試圖實現「下一步」按鈕以專注於下一個文本輸入時,鍵盤將開始隱藏動畫,然後彈出備份。

我已經試過

我見過使用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; 
    }); 
    } 

回答