React Native中String.slice()报错：无法读取undefined值的问题

问题出在 React Native 和 Web 端 TextInput（或 <input>）的事件参数结构差异：Web 端可以通过 event.target.value 获取输入值，但 React Native 的 onChange 事件中 event.target 是 undefined，导致你拿到的 value 为 undefined，调用 slice() 时触发报错。

解决方法有两种： #

方法一：使用官方推荐的 onChangeText（更简洁）

onChangeText 会直接将输入文本作为参数传入回调，无需处理事件对象：

<TextInput
  style={styles.largeFormInput}
  onChangeText={(value) => {
    setBio(value.slice(0, 10));
  }}
  value={bio}
  name="bio"
  placeholder="Brief Biography (i.e. hobbies, family life, welness tools & programs that work for you)"
  placeholderStyle={styles.placeholderStyle}
/>

方法二：保留 onChange，读取 nativeEvent.text

如果一定要用 onChange，需要从事件的 nativeEvent 属性中获取输入值：

<TextInput
  style={styles.largeFormInput}
  onChange={(event) => {
    let value = event.nativeEvent.text;
    setBio(value.slice(0, 10));
  }}
  value={bio}
  name="bio"
  placeholder="Brief Biography (i.e. hobbies, family life, welness tools & programs that work for you)"
  placeholderStyle={styles.placeholderStyle}
/>

两种方式都能在 Expo Go 模拟器中正常实现字符串截取功能，和 Web 端表现一致。

内容的提问来源于stack exchange，提问作者Lucas Jablon