在本机反应中启用/禁用返回键类型答案

【问题标题】：enable/disable return key type in react native在本机反应中启用/禁用返回键类型
【发布时间】：2017-04-17 06:23:34
【问题描述】：

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

【问题讨论】：

标签： javascript react-native react-native-ios

【解决方案1】：

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

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

希望有帮助

【讨论】：

这不像你提到的那样工作。启用或禁用按钮的逻辑不受 enablesReturnKeyAutomatically 属性控制。据我所知，你无法控制行为
请注意，我的回答是从四月开始的。我猜 API 变了。

【解决方案2】：

是的:-)

将 disabled 属性传递给您的“提交”按钮。
在您的组件上创建一个方法，例如 isDisabled，它返回 true 或 false。
现在在您的“提交按钮”中传递disabled={this.isDisabled()}。
它的（真或假）值决定了您的 return/done/go/next/search/send..（提交）键是启用还是禁用。

这里是来自 react native 文档的链接：disabled prop on Button component。
注意：文档并没有使其显而易见，但是这个道具也是可用的在TouchableOpacity 和相关组件上。

disabled: 如果为 true，则禁用此组件的所有交互。类型：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 组件本身，但是可能也可以直接禁用它。

【讨论】：