简体   繁体   English

反应本机文本输入合成事件问题

[英]React native text input synthetic event issue

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

You need to pass it on the onChange in order to have the value you are looking for:您需要将它传递给 onChange 以获得您正在寻找的值:

<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:其次,您需要控制导入的 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否则你可以使用event.target.value ,即输入组件的原生事件值

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM