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.
 }

Answer 1

python -m pip install --upgrade pip
easy_install -U setuptools
pip install ez_setup
pip install --upgrade setuptools --user python

Answer 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,
  },
});

Answer 3

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

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
}

Answer 5

尝试为所有textInput

提供ID

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

在方法 -

中

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

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

5 个答案: