Реагировать на родное получение имени TextInput в OnChange

Question

Я пытаюсь создать общий обработчик onChange для нескольких объектов TextInput. Однако, когда я получаю доступ к событию, лучшее, что я могу получить, это event.nativeEvent, который имеет 3 ключа.

eventCount, target и text

цель - только число. Из документов я понимаю, что «имя» не является опорой TextInput. Есть ли способ передать реквизит в TextInput, чтобы я мог получить его позже в onChange и затем установить состояние на его основе?

У меня есть 2 TextInputs, как это

<TextInput 
          name='foo'
          keyboardType='numeric'
          maxLength={4}
          onChange={this.handleChange}
        />

<TextInput 
          name='bar'
          maxLength={4}
          onChange={this.handleChange}
        />

Спасибо

EDIT: Вот что я пытался поставить id на TextInput

<TextInput 
          id='bar'
          name='bar'
          maxLength={4}
          onChange={this.handleChange}
        />

handleChange(e) {
console.log(e.target.id);
const {name, type, text} = e.nativeEvent;
this.setState({baths: text});

}

Answer 1

Вы не можете предоставить или мутировать props, которые уже определены в документации .

Поэтому вы можете создавать собственныекомпонент для TextInput как

const TextInputComponent = ({value, onChangeText, name, ...props}) => (
    <TextInput
        value={value}
        onChangeText={(value) => onChangeText(name, value)} //... Bind the name here
        {...props}
    />
)

Использование как вы обычно используете

          onChangeValue = (name, value) => {
             console.log(name, value)
             // Set the state according to your needs here
          }

          <TextInputComponent
            value={this.state.value}
            onChangeText={this.onChangeValue}
            name={'Pritish'}
          />

Answer 2

Вы можете присвоить вашему <TextInput> значение id, а затем получить к нему доступ в handleChange с помощью event.target.id.