reactjs - React Native 在 OnChange 中获取 TextInput 的名称

Question

我正在尝试为多个 TextInput 制作通用的 onChange 处理程序。然而，当我访问该事件时，我能得到的最好的结果是 event.nativeEvent 它有 3 个键。

事件计数、目标和文本

目标只是一个数字。我从文档中意识到“名称”不是 TextInput 的支柱。有没有办法将 prop 传递给 TextInput，以便我稍后可以在 onChange 中获取它，然后根据它设置状态？

我有 2 个这样的 TextInputs

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

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

谢谢

编辑:这是我尝试将 id 放在 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});

}

Answer 1

您不能提供或改变已由documentation定义的props .

因此，您可以为 TextInput 创建自定义组件为

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

用法与正常使用一样

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