禁用来自 react-native-autocomplete-input 的输入

Question

我正在使用 react-native-autocomplete-input，我想禁用 <Autocomplete /> 输入。我尝试添加disabled={this.state.loading}（在加载数据时禁用它......现在用户可以在自动完成功能可用之前开始输入）。

我相信有办法做到这一点，但我一直无法弄清楚。代码如下：

<Autocomplete
        data={data}
        defaultValue={query}
        listStyle={styles.autoCompleteItems}
        onChangeText={(text) => this.setState({query: text})}
        renderItem={(data) => (
          <TouchableOpacity onPress={() =>
              this.setState({query: data.name, schoolId: data.id, social: data.social})
            }
            >
            <Text>{data.name}</Text>
          </TouchableOpacity>
        )}
        />

Answer 1

react-native-autocomplete-input 本身不提供禁用输入字段的功能。所以传递 disabled={this.state.loading} 将无效。

您可以通过进入node_modules/react-native-autocomplete-input 文件夹并编辑index.js 文件来编辑包。

将 index.js 中的渲染函数更改为跟随。现在它接受 isEditable 属性并将其传递给 TextInput

render() {
    const { showResults } = this.state;
    const { containerStyle, inputContainerStyle, onEndEditing, isEditable, style, ...props } = this.props;
    return (
      <View style={[styles.container, containerStyle]}>
        <View style={[styles.inputContainer, inputContainerStyle]}>
          <TextInput
            editable={isEditable}
            style={[styles.input, style]}
            ref="textInput"
            onEndEditing={e =>
              this._showResults(false) || (onEndEditing && onEndEditing(e))
            }
            {...props}
          />
        </View>
        {showResults && this._renderItems()}
      </View>
    );
  }

现在您可以将isEditable={this.loading} 作为道具传递给<Autocomplete />