Question

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

eventCount，target和text

目标只是一个数字。我从文档中了解到'name'不是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

或者您可以简单地做到：

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

Answer 2

您无法提供或 mutate <input type="text" id="targetText" value="content content">已经定义的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'}
          />

Answer 3

onChangeText = {（）=> this.handelChange（“ yourStateName”）}

handleChange =（yourStatename）=>（inputtext）=> { setState（{[yourStatename]：inputtext}）

Answer 4

您可以向<TextInput> id提供handleChange，然后使用event.target.id在set CMS_SQL="cms91_to_913.json cms913_to_9132.json cms9132_to_9133.json cms9133_to_10100.json" set CMS_FROM_VERSION="cms913_" set CMS_TO_VERSION="to_9133.json"中对其进行访问。

Answer 5

React Native 没有 event.target.name

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

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

<TextInput
    placeholder='text name'
    onChangeText={handleTextChanges('mytextname')}
/>

React Native在OnChange中获取TextInput的名称

5 个答案: