Question

如果使用以下代码库。

import React, { useState } from 'react';
import { TextInput } from 'react-native';

export function LoginInput() {
  const [text, setText] = useState('');

  function handlerTextChange(e) {
    setText(e.target.value)
  }

  return (
    <TextInput
      style={{ height: 40 }}
      value={text}
      onChangeText={handleTextChange}
    />
  )
}

如何定义e的类型，它是事件类型还是仅仅是事件的任何类型？

Answer 1

使用 onChange 时，您必须使用 e.target.value ，其中 e 是本地事件并且e.target.value是字符串。

仅使用 onChangeText 来获取文本，

<TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
/>

其中文本仅是字符串。

看看https://facebook.github.io/react-native/docs/textinput#onchange

Answer 2

将提供您输入的值。因此，类型是字符串值。

import React, { Component } from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    inputValue: '',
  };

  handlerTextChange = inputValue => {
    console.log(inputValue) // String you entered
    console.log(typeof inputValue) // string
    this.setState({ inputValue });
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.inputValue}
          onChangeText={this.handlerTextChange}
          style={{ width: 200, height: 44, padding: 8, borderWidth: 1, borderColor: '#ccc' }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#fff',
  },
});

TextInput目标值的类型是什么

2 个答案: