如何在没有状态的情况下实现TextInput [React-native]

在没有状态的情况下实现TextInput，可以通过使用受控组件和非受控组件两种方式来实现。

受控组件：受控组件是指通过state来控制组件的值和状态。在React Native中，可以使用state来控制TextInput的值。具体步骤如下：

在组件的constructor中初始化一个state属性，用于保存TextInput的值。
在TextInput的value属性中绑定state的值。
在TextInput的onChangeText属性中绑定一个回调函数，用于更新state的值。

示例代码：

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

class MyTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }

  onChangeText = (text) => {
    this.setState({ text });
  }

  render() {
    return (
      <TextInput
        value={this.state.text}
        onChangeText={this.onChangeText}
      />
    );
  }
}

export default MyTextInput;

非受控组件：非受控组件是指不使用state来控制组件的值和状态。在React Native中，可以通过使用ref来获取TextInput的值。具体步骤如下：

在组件中创建一个ref属性。
在TextInput的ref属性中绑定ref。
在需要获取TextInput的值的地方，通过ref.current.value来获取。

示例代码：

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

class MyTextInput extends Component {
  constructor(props) {
    super(props);
    this.textInputRef = createRef();
  }

  getText = () => {
    const text = this.textInputRef.current.value;
    console.log(text);
  }

  render() {
    return (
      <TextInput
        ref={this.textInputRef}
      />
    );
  }
}

export default MyTextInput;

以上是在React Native中实现没有状态的TextInput的两种方式。根据具体需求选择适合的方式即可。

腾讯云相关产品推荐：