React native text input synthetic event issue

user_17249442 0
Viewed 36

I have made a reusable textinput component in react native, but when I am trying to access text value it gives me synthetic event object then the text value, I am not able to target text value. I know this maybe a possible duplicate but I have tried many methods but it isn't working. Here is my code snippet.

/**Imported Component **/

<InputField
     placeholder="Disabilities"
     defaultValue={values.associatedDisabilities.toString()}
     onChange={(value) => console.log(value)}
/>

/**Reusable Component **/

<TextInput
          style={[
            styles.textInput,
            props.style,
            { color: theme.colors.mainForeground },
          ]}
          onChangeText={props.onChange}
          defaultValue = {props.defaultValue}
          value={props.value}
          onBlur={props.onBlur}
          {...props}
          placeholderTextColor={
            currentTheme === ThemeTypes.LIGHT
              ? theme.colors.secondaryText
              : theme.colors.mainForeground
          }
          editable={props.editable}
          selectTextOnFocus={props.editable}
/>
react-native javascript
1 Answers

You need to pass it on the onChange in order to have the value you are looking for:

<TextInput
          style={[
            styles.textInput,
            props.style,
            { color: theme.colors.mainForeground },
          ]}
          onChangeText={(value) => props.onChange(value)}
          defaultValue = {props.defaultValue}
          value={props.value}
          onBlur={props.onBlur}
          {...props}
          placeholderTextColor={
            currentTheme === ThemeTypes.LIGHT
              ? theme.colors.secondaryText
              : theme.colors.mainForeground
          }
          editable={props.editable}
          selectTextOnFocus={props.editable}
/>

In second place, you need to control imported comp:

<InputField
     placeholder="Disabilities"
     defaultValue={values.associatedDisabilities.toString()}
     onChange={(value) => console.log(value)}
     value
/>

Otherwise you can use event.target.value, that is the native event value of the input component

user_184710780
Related