javascript - 禁用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 />的支撑