Как несколько TextInput обрабатывать с одним обработчиком?

Я создал общий класс для 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.
 }
Источник

6 ответов

Решение

Вы можете просто передать другой параметр 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

Я создал небольшой проект, чтобы показать вам, как он работает. Вы можете проверить код и внедрить его в свой проект по своему желанию. Из-за того, что вы не объясняете ошибку точно, становится сложнее точно найти, что не так с вашим кодом. Сказать не работает никогда не достаточно. Вы можете найти проект здесь (Экспо)

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,
  },
});
Источник 
_handleMultiInput(name) {
    return (text) => {
        this.setState({ [name]:text })
    }
}

<TextInput
   placeholder='enter your name.'
   onChangeText={_handleMultiInput('myName')}
/>
Источник

Добавлять 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
}
Источник

Проходить name атрибут в textInput. В будущем, если вам потребуется обновить поле текущего состояния, вы можете обработать его следующим образом:

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>    
  );
 }
}
Источник

Использование функциональной составляющей. У меня есть три входа: сумма, дата и описание для сохранения. Вот как сохранить их в одном объекте и использовать одну и ту же функцию для всех трех TextInput.

       // useState hook to store object
     const [inputValues, setInputValues] = useState({
        amount: '',
        date: '',
        description: '',
      });

      // will save user input
      function inputChangeHandler(inputIdentifier, enteredValue) {
        setInputValues(currentInputValues => {
           return {
              ...currentInputValues, 
              [inputIdentifier]: enteredValue, // dynamically override the desired input
           };
        });
       }

    // TextInput Component
            <TextInput
              onChangeText={inputChangeHandler.bind(this, 'amount')}
              value={inputValues.amount}
              placeholder={inputValues.title}
            />
            <TextInput
              onChangeText={inputChangeHandler.bind(this, 'date')}
              value={inputValues.date}
              placeholder={inputValues.title}
            />
            <TextInput
              onChangeText={inputChangeHandler.bind(this, 'description')}
              value={inputValues.date}
              placeholder={inputValues.title}
            />
Источник

Попробуйте дать идентификатор всем 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 --------
 }
Источник
Другие вопросы по тегам