如何使用单个处理程序多个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 
}