React Native - 函數調用後修改TextInput

我試圖創建一個表單，它在敲擊後會自動移動到以下參數。我想出了一個這樣做的方法，但會帶走幾百行代碼。我認爲必須有一個更簡單的方法。我基本上有兩個問題：React Native - 函數調用後修改TextInput

如何添加計數器到XInput2部分。
如何正確添加參考。我目前的代碼給出：undefined不是一個對象this5.refs.XInput.focus（）沒有定義。

所以這是渲染我的TextInput字段的代碼。

renderTextField(options) { 
    return (
     <TextInput 
      style={styles.textfield} 
      onChangeText={(value) => this.setState({ [options.name]: value})} 
      onSubmitEditing={(event) => { 
      this.refs.XInput.focus(); 
      }} 
      placeholder={options.label} 
      value={this.state[options.name]} 
      keyboardType={options.keyboard || 'default'} 
     /> 
    ); 
}

這將是我用來調用它的代碼。

{this.renderTextField({ name: 'cacao21', label: 'Fermented Beans', ref="XInput1"})} 
{this.renderTextField({ name: 'cacao22', label: 'Partially Fermented Beans', ref="XInput2"})}

請看看XInput。我認爲最好的方法是使用XInput值的計數器並手動修改它。我如何爲這個值添加一個計數器還是有更好的方法？

onSubmitEditing={(event) => { 
       this.refs.XInput.focus(); 
       }}

來源

2017-06-09 Juanvulcano

String refs正在被棄用，應該避免。不要擔心，從長遠來看，推薦的方式會爲您節省一些頭痛，安靜簡單易懂。

所以基本上我修復了實際上在TextInput中定義的引用，而不是擔心複雜的計數器系統，我使用next選項來簡化它，它將成爲提交下一個字段的名稱。

這應該讓你開始：

renderTextField = (options) => { 
    return (
    <TextInput 
     ref={(tInput) => { this.refs[options.name] = tInput; }} 
     style={{ height: 25 }} 
     onChangeText={(value) => this.setState({ [options.name]: value })} 
     onSubmitEditing={() => { 
     if (options.next) { 
      this.refs[options.next].focus(); 
     } 
     }} 
     placeholder={options.label} 
     value={this.state[options.name]} 
     keyboardType={options.keyboard || 'default'} 
    /> 
); 
};

其他位：

{renderTextField({ name: 'cacao21', label: 'Fermented Beans', next: 'cacao22' })} 
{renderTextField({ name: 'cacao22', label: 'Partially Fermented Beans', next: 'cacao23' })} 
{renderTextField({ name: 'cacao23', label: 'End of the Bean Line' })}

來源

2017-06-09 16:11:32

React Native - 函數調用後修改TextInput

回答

相關問題