如何使用单个处理程序处理多个 TextInput？

Posted 2023-02-23

【中文标题】如何使用单个处理程序处理多个 TextInput？

【英文标题】：How to multiple TextInput handle with single handler?

【发布时间】：2018-02-23 08:36:24

【问题描述】：

我已经为 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.
 

【问题讨论】：

请查看此参考链接：***.com/questions/29280445/…

最好使用 redux-form ，redux-form.com/6.0.0-alpha.4/docs/faq/reactnative.md

【参考方案1】：

_handleMultiInput(name) 
    return (text) => 
        this.setState( [name]:text )
    


<TextInput
   placeholder='enter your name.'
   onChangeText=_handleMultiInput('myName')
/>

【参考方案2】：

您可以将另一个参数传递给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,
  ,
);

【讨论】：

@KiritModi “不工作”信息不足。

根据数组数据动态添加的textField组件。现在，当用户编辑 textInput 时，我想识别特定索引上的 textInput 和更新的数组文本。

@KiritModi 仍然没有解释 not working 部分。什么不工作？如果你得到任何错误，你会得到什么？您的 动态添加 部分可能有问题。如果您提供更多信息，也许我可以提供更多帮助。

我将用 GIF 更新问题，以便您轻松获取。

我想动态添加textFiled，在ios中有标签以便我们处理。但在 rect 不是 ant 标签。

【参考方案3】：

下面的代码适用于 react 但不适用于 react native：“onChangeText”仅传递文本。还有另一种名为“onChange”的方法可以传递输入本身，但是在 react native 上它不会传递输入（因为 RN 适用于 android/iOS/web，而 Android/iOS 没有 event.target）

将name 添加到TextInputs

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

并将handleAddMore定义为：

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

【讨论】：

@KiritModi 你是自己实现了TextInput 组件还是从某个库中使用它？

没有它的默认组件。

根据数组数据动态添加的textField组件。现在，当用户编辑文本输入时，我想识别特定索引上的文本输入和更新的数组文本。

为什么以上答案对您没有帮助？

它只获取方法内的文本。我还想参考 textInput。

【参考方案4】：

在 textInput 中传递 name 属性。将来如果您需要更新当前状态字段，您可以这样处理：

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>    
  );
 

【讨论】：

@KiritModi，是的，我为你编辑了完整的组件。如果您需要，我可以为您编写子组件 - 如果您为 Web 开发 TextInput，也可以为 ios/android 开发。