React Native 在 OnChange 中获取 TextInput 的名称

Question

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

eventCount、目标和文本

目标只是一个数字。我从文档中意识到“名称”不是 TextInput 的道具。有没有办法将道具传递给 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

你不能提供或突变的props那些已经被定义文档。

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

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

Answer 2

或者你可以简单地做：

<TextInput 
             keyboardType='numeric'
             maxLength={4}
             onChange={e => this.handleChange(e,'foo')}
           />
<TextInput 
             name='bar'
             maxLength={4}
             onChange={e => this.handleChange(e,'bar')}
           />

然后在 ts 文件中

handleChange(event,name){
    // whatever
}

编辑：如果您担心性能，可以使用数据集。任何以data-为前缀的属性都被添加到target.dataset对象中。

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

然后在 ts 文件中

handleChange(event){
    const {name} = event.target.dataset
    // whatever
}