CODEWITHSUNDEEP
reactjsreact-native
Fricken Hamster
Fricken Hamster

Reputation: 569

React Native getting name of TextInput in OnChange

I'm trying to make a general onChange handler for multiple TextInput s. However when I access the event, the best I can get is event.nativeEvent which has 3 keys.

eventCount, target, and text

target is only a number. I realize from the docs that 'name' is not a prop of TextInput. Is there a way to pass in a prop to the TextInput so I can get it later in onChange and then set the state based on that?

I have 2 TextInputs like this

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

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

Thanks

EDIT: Here is what I tried for putting id on 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});

}

Upvotes: 9

Views: 22623

Answers (6)

AyoDavid
AyoDavid

Reputation: 1040

React Native does not have event.target.name

You have to define the name on your own and then pass the name to a function that will handle the TextInput changes.

const handleTextChanges = (mytextname) => {
    return (val) => {
        setState({ ...data, [mytextname]: val })
    }
}

<TextInput
    placeholder='text name'
    onChangeText={()=>handleTextChanges('mytextname')}
/>

Upvotes: 2

banditKing
banditKing

Reputation: 9579

none of these worked for me. Ppl just putting bs here.

The answer is so simple, not sure why ppl are complicating this. Just use the following version of onChangeText:

onChangeText:(txt)=>{handleSubmit({sender:"name", val:txt})},

handle submit is:

function handleSubmit({sender, val}){
   console.log("Received following Value "+val +" from " + "sender = "+sender)}

Upvotes: 0

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6917

You can do something like this

const [myForm, setMyForm] = useState({
  name: '',
  phone: ''
})

const handleChange = (text, inputType) => {
  console.log('Text', text, ' InputType', inputType)
  setMyForm(prevForm => ({
   ...prevForm,
   [inputType] : text
  })
}


<View>
  <TextInput
    onChangeText={(text) => handleChange(text, 'phone')}
    style={styles.textInput}
    placeholder="Phone"
  />
  <TextInput
    style={styles.textInput}
    onChangeText={(text) => handleChange(text, 'email')}
    placeholder="Email"
  />
</View>

Upvotes: -1

Mohit Singh
Mohit Singh

Reputation: 505

Or you can simply do:

<TextInput 
             keyboardType='numeric'
             maxLength={4}
             onChange={e => this.handleChange(e,'foo')}
           />
<TextInput 
             name='bar'
             maxLength={4}
             onChange={e => this.handleChange(e,'bar')}
           />

and then in ts file

handleChange(event,name){
    // whatever
}

Edit: If you are worried about performance, you can use datasets. Any attribute prepended by data- are added to target.dataset object.

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

and then in ts file

handleChange(event){
    const {name} = event.target.dataset
    // whatever
}

Upvotes: 7

Umar Zahir
Umar Zahir

Reputation: 25

onChangeText={() => this.handelChange("yourStateName")}

handleChange = (yourStatename) => (inputtext) => { setState({ [yourStatename]: inputtext })

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You cannot supply or mutate the props that have already been defined by the documentation.

Therefore you can create custom component for TextInput as

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

Usage as you would use normally

          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'}
          />

Upvotes: 7

Related Questions