1-设置对组件的引用：

Question

当前，我正在使用此组件列出Api中的值。 https://github.com/maxkordiyak/react-native-dropdown-autocomplete/blob/master/components/Autocomplete/index.js

一切正常，直到我尝试寻找一种方法来清除该值。如果您在链接中看到文件，则inputValue在构造函数中启动，我想从使用它的文件中手动清除该值。

这是（组件的）代码的一部分，您可以在其中看到输入值：

import {Autocomplete, withKeyboardAwareScrollView} from "react-native-dropdown-autocomplete";

class Autocomplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: props.initialValue || "", /* THIS IS THE ONE I NEED TO CLEAR MANUALLY*/
      loading: false,
      filteredItems: [],
    };
    this.mounted = false;
    this.timer = null;
    ...
    ...

基本上，我使用像这样的自动完成组件：

                           <Autocomplete
                                key={1}
                                inputContainerStyle={styles.autocompleteContainer}
                                style={styles.loginFormTextInput}
                                scrollToInput={ev => scrollToInput(ev)}
                                handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
                                onDropdownClose={() => onDropdownClose()}
                                onDropdownShow={() => onDropdownShow()}
                                fetchDataUrl={apiUrl}
                                placeholder={"Search..."}
                                minimumCharactersCount={2}
                                highlightText
                                valueExtractor={item => item.name + " " + item.address}
                                leftContent
                                rightTextExtractor={item => item.properties}
                            />

有没有办法从自动完成中获取值并将其清除？

注意：我不想“ resetOnSelect”事件，因为我需要保留该值并通过按钮将其重置，这是必需的。

编辑：直接操纵似乎是这样 https://facebook.github.io/react-native/docs/direct-manipulation#setnativeprops-to-clear-textinput-value

重新编辑：我发布了最终解决方案。

Answer 1

您可以通过这种方式完成。

function my_comp = ({props}) => {
  const [ toggleInput, setInputToggle ] = useState(true);
  return (
    <React.Fragment>
      <Autocomplete
        {...props}
        key={toggleInput ? 'true' : 'false'}
      />
      <TouchableOpacity onPress={() => {setInputToggle(!toggleInput);}}>
        <Text>Reset</Text>
      </TouchableOpacity>
    </React.Fragment>
  );
}

您可以使用任何值和状态重新呈现“自动完成”。上面的代码将重新渲染“单击按钮时自动完成”并重置该值。

Answer 2

我通过两个简单的步骤找到了解决方案：

1-设置对组件的引用：

<Autocomplete
    ref="refSelectOrigin"
    ...

2-通过直接访问组件来覆盖值：

this.refs.refSelectOrigin.setState({
    inputValue: "",
    }
)

操作导入的组件道具和功能？

2 个答案:

1-设置对组件的引用：

2-通过直接访问组件来覆盖值：