无法读取未定义的属性（读取“目标”）

Question

先post这里。我尝试在论坛中搜索，但 none 的答案似乎适用于我的情况。我是 React 的新手，我的 onChange 处理程序有问题。

在我的 parent 组件中，我有以下内容：

    // User registration - Onchange handler

    const handleChange = (value, event) => {
      // console.log(event.target.value);
      setFormValue({
        ...formValue,
        [event.target.name]: value,
      });
    };

基本上 parent 组件呈现一个多步骤注册表单，它根据状态呈现不同的组件，这里是用户名的条件：

 {step === 1 ? <Username handleChange={handleChange} formValue={formValue} /> : null}

在child中我有以下输入组件：

export const Username = ({formValue, handleChange}) => {
  const username = formValue; 
  
    return (
      <View>
      <Input 
      placeholder="Username..."
      onChangeText={handleChange}
      value={formValue.username}
      name={username} />
      </View>
    )
  }

和输入组件：

const Input = (props, name) => {

  return (
    <Animated.View style={[styles.inputSection, inputAnimated]}>
        <TextInput style={styles.input} placeholder={props.placeholder} placeholderTextColor={theme.colors.lightP} fontSize={16} {...props}/>
    </Animated.View>
  )
}

我不确定为什么会收到错误消息：

无法读取未定义的属性（读取“目标”）

非常感谢任何帮助。 Console.log 共 event.target returns 未定义。

Answer 1

发生这种情况是因为 onChangeText 将输入的值自动传递给分配给它的函数，而不是传递事件本身

如果你想使用事件 => 使用 onChange 而不是 onChangeText

Answer 2

在文档中您 can read for the onChange event

您正在使用 onChangeText

所以 onChangeText 只有文本值，但是如果你想拥有原生事件，你必须使用 onChange。

然后在你的方法中访问它

    const handleChange = ({ nativeEvent: { eventCount, target, text} }) => {
      // console.log(event.target.value);
      setFormValue({
        ...formValue,
        [target]: text,
      });
    };

EDITED

因为再次询问如何访问文本输入的名称。这里 link 显示 how to handle text input

你也可以这样做：例如，在您的方法中，您从参数中给出了一个名称，您可以将该名称传递给处理程序参数：

export const Username = ({formValue, handleChange}) => {
  const username = formValue; 
  
    return (
      <View>
      <Input 
      placeholder="Username..."
      onChangeText={(value)=>handleChange(value,username)} {/* here username is the name you are passing to the value */}
      value={formValue.username}
      name={username} />
      </View>
    )
  }

// then in your handle method
   const handleChange = (value,name) => {
      setFormValue({
        ...formValue,
        name: value,
      });
    };

无法读取未定义的属性（读取“目标”）

Cannot read properties of undefined (reading 'target)

javascript

reactjs

react-native