5

我为 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.
 }
4

4 回答 4

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

<TextInput
   placeholder='enter your name.'
   onChangeText={_handleMultiInput('myName')}
/>
于 2019-02-01T10:53:08.557 回答
4

您可以将另一个参数传递给handleAddMore?

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

handleAddMore = (text, textInput) => {

}

更新 1

onChangeTexttext作为参数接收， onChange接收event

更新 2

我创建了一个小项目来向您展示它是如何工作的。您可以根据需要检查代码并将其实施到您的项目中。您没有准确地解释错误会使您更难准确地找到代码的问题。说不工作 是永远不够的。您可以在此处（世博会）上找到该项目

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,
  },
});
于 2017-09-14T11:54:14.830 回答
2

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

添加name到文本输入

<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
}
于 2017-09-14T12:00:38.030 回答
1

在 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>    
  );
 }
}
于 2017-09-14T11:38:37.023 回答