如何使用單個處理程序多個TextInput句柄？

Question

我已經爲TextInput創建了公共類，並多次使用它，但它的事件處理方法與之相同。我想在填充textInput中的數據後處理數組數據。

此處添加了多個textfield和單個handleAddMore。如何識別哪個textInput叫做handleAddMore。

textField組件根據數組數據動態添加。現在當用戶編輯textInput時，我想確定textInput和特定索引上更新的數組文本。

let addMoreCompView = this.state.dataAddMore.map((data ,index) =>{ 
return(
    <View style ={[styles.commonMargin ,{flexDirection : 'row',marginTop : 2 , height : 40, backgroundColor : Globle.COLOR.INPUTCOLOR}]}> 
    <View style = {{height : '100%' , width : '80%' , justifyContent: 'center' ,alignItems: 'flex-start', flexDirection : 'column'}}> 
     <TextInput style = {{fontFamily: 'Gotham-Light',fontSize : 14 ,color: Globle.COLOR.BACKCOLOR , paddingLeft : 20}} 
       underlineColorAndroid = "transparent" 
       placeholder = 'Please enter emailID.' 
       placeholderTextColor = 'black' 
       autoCapitalize = "none" 
       keyboardType = "email-address" 
       onSubmitEditing ={Keyboard.dismiss} 
       onChangeText = {this.handleAddMore} 
       autoCorrect = {false}/> 
    </View> 
    <TouchableOpacity onPress = {() => this.removeMoreComponent(data.key)} style = {{height : '90%' , width : '20%' , alignItems: 'flex-end', justifyContent: 'center'}}> 
     <Image style = {{width : 9 , height : 10 , marginRight : 20}} source = {require('./Images/cancelMore.png')}/> 
    </TouchableOpacity> 
    </View> 
) 
}); 

在這裏，我要確定哪些TextInput調用此方法。

這裏我想要textField的文本和索引。

handleAddMore = (text) =>{ 

    // Here I want to text and index of textField. 
} 

查看GIF：

Answer 1

您只需通過另一個參數handleAddMore？

<TextInput 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(text) => { this.handleAddMore(text, 'textInput1'); }} 
    autoCorrect = {false} 
/> 

handleAddMore = (text, textInput) => { 

} 

---

更新1

onChangeText接收text作爲參數和onChange接收event

---

更新2

我創建了一個小項目來向你展示它是如何工作的。您可以檢查代碼並將其實施到您的項目中，如您所願。你沒有解釋錯誤，確切地說很難找到你的代碼有什麼問題。說不工作永遠不夠。你可以找到項目上Here（世博會）

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     info: '', 
     inputCount: 3, 
     data: [{ name: 'input1' }, { name: 'input2' }, { name: 'input3' }], 
    }; 
    this.inputRefs = {}; 
    } 

    onAddMore() { 
    const newData = this.state.data; 
    newData.push({ name: `input${this.state.inputCount + 1}` }); 
    this.setState(prevState => ({ 
     inputCount: prevState.inputCount + 1, 
     data: newData, 
    })); 
    } 

    _onChangeText(text, inputName) { 
    console.log('Input Name:', inputName, text); 
    console.log("Inout's Ref:", this.inputRefs[inputName]); 
    const info = `${this.state.info}\n\r${inputName} changed text`; 
    this.setState({ 
     info 
    }); 
    } 

    _onChange(event, inputName) { 
    console.log('Input Name:', inputName); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     {this.state.data.map(d => (
      <View style={styles.inputWrapper} key={d.name}> 
      <TextInput 
       style={styles.input} 
       onChangeText={(text) => { this._onChangeText(text, d.name); }} 
       onChange={(event) => { this._onChange(event, d.name); }} 
       ref={ref => { 
       this.inputRefs[d.name] = ref; 
       }} 
       defaultValue={d.name} 
      /> 
      </View> 
     ))} 
     <Button 
      onPress={this.onAddMore.bind(this)} 
      title="Add More" 
      color="#841584" 
     /> 
     <TextInput 
      multiline={true} 
      editable={false} 
      style={styles.info}> 
      {this.state.info} 
      </TextInput> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#F2F2F2', 
    }, 
    info: { 
    flex: 0.5, 
    }, 
    inputWrapper: { 
    backgroundColor: 'yellow', 
    marginTop: 5, 
    marignBottom: 5, 
    marginLeft: 5, 
    marginRight: 5, 
    }, 
    input: { 
    height: 55, 
    paddingLeft: 15, 
    paddingRight: 5, 
    paddingTop: 5, 
    paddingBottom: 5, 
    }, 
}); 

Answer 2

先給ID來爲textInput

<TextInput 
    Id ="textInput1" placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleAddMore} 
    autoCorrect = {false}/> 

在方法 -

handleAddMore = (e) =>{ 
    if (e.target.ID == 'textInput1') 
    //---------your code -------- 
} 

Answer 3

通name ATT textInput中的ribute。在未來，如果你將需要更新當前狀態字段，你能應付這樣的：

class MyComponent extends Component { 
state = { val1: '', val2: '' }; 

handleChange = e => this.setState({ [e.target.name]: e.target.value }); 

render(){ 
    const { val1, val2 } = this.state; 
    console.log(val1, val2); 
    return(
    <div> 
    <TextInput 
    name="val1" 
    value={val1} 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleChange} 
    autoCorrect = {false}/> 

    <TextInput 
    name="val2" 
    value={val2} 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {this.handleChange} 
    autoCorrect = {false}/> 
    </div>  
); 
} 
} 

Answer 4

添加name到TextInputs

<TextInput 
    name='input1' 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(e) => this.handleAddMore(e.target.name)} 
    autoCorrect = {false} 
/> 
<TextInput 
    name='input2' 
    placeholder = 'Please enter emailID.' 
    onSubmitEditing ={Keyboard.dismiss} 
    onChangeText = {(e) => this.handleAddMore(e.target.name)} 
    autoCorrect = {false} 
/> 

並定義handleAddMore爲：

handleAddMore = (name) =>{ 
    //add your code here 
}