React Native 在 OnChange 中获取 TextInput 的名称

IT技术 reactjs react-native
2021-05-12 07:25:09

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

eventCount、目标和文本

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

}

4个回答

你不能提供或突变的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'}
          />

或者您可以简单地执行以下操作：

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

onChangeText={() => this.handelChange("yourStateName")}

handleChange = (yourStatename) => (inputtext) => { setState({ [yourStatename]: inputtext })

React Native 没有 event.target.name

您必须自己定义名称，然后将该名称传递给将处理 TextInput 更改的函数。

const handleTextChanges = (mytextname) => {
    return (val) => {
        setState({ ...data, [mytextname]: val })
    }
}

<TextInput
    placeholder='text name'
    onChangeText={handleTextChanges('mytextname')}
/>
其它你可能感兴趣的问题
上一篇如何在 shouldComponentUpdate 中比较 prevProps 和 this.props 下一篇调整 300% 速度的想法