Question

我正在使用React Native的TextInput。我注意到enableReturnKey会自动使键盘的返回键被禁用，直到输入一些文本为止。有没有办法自己控制返回键的禁用状态？

Answer 1

是： - ）

将disabled道具传递给您的＆＃34;提交＆＃34;按钮。
在您的组件上创建一个方法，例如isDisabled，返回true或false 现在在你的＆＃34;提交按钮＆＃34;传入disabled={this.isDisabled()}。
其（true或false）值确定是启用还是禁用return / done / go / next / search / send ..（submit）键。

以下是反应原生文档的链接：disabled prop on Button component 注意：文档不会使显而易见，但此道具也可用于TouchableOpacity及相关组件。

disabled：如果为true，则禁用此组件的所有交互。 TYPE：bool必填：否

这是一个简化的MVE示例，直接来自my own apps之一：
canSubmit()是打开/关闭提交键的函数的名称：

import React from 'react';
import { View, Text, TouchableOpacity, TextInput} from 'react-native';

class NewDeck extends React.Component {

  state = {
    title: '',
    beenTouched: false,
    errorMessage: '',
  }

  controlledTextInput(prevTitle){
    const isEmptyStringErrorMessage = this.isEmptyStringErrorMessage(title);

    this.setState({
      title,
      errorMessage,
      beenTouched: true,
    });
  }

  isEmptyStringErrorMessage(text){
    return (text.trim() === '')
            ? 'Cannot be an empty string.'
            : ''
  }

  canSubmit(){
    return (!this.state.errorMessage && this.state.beenTouched) &&
  }

  render() {
    return (
      <View>

          <TextInput 
              placeholder='Quiz Deck Title'
              value={this.state.title}
              returnKeyType={ "done" }
          />

          <TouchableOpacity
            onPress={ () => this.onSubmit()}
            disabled={!this.canSubmit()}
            >
            <Text>
              Submit
            </Text>
          </TouchableOpacity>

      </View>
    );
  }
}

我没有尝试将此同一属性直接传递到TextInput组件本身，但可能也可以直接禁用它。

Answer 2

你可以做的是实现一个自定义逻辑布尔值，你可以插入enablesReturnKeyAutomatically。根据其状态，您可以控制设置本身：

render = () => {
    let bool = //... some custom logic
    return (
        <TextInput some="values" enablesReturnKeyAutomatically={bool} />
    )
}

希望有所帮助

在本机中启用/禁用返回键类型

2 个答案: