react-native - 如何将 TextInput 组件“清除”按钮

Question

我react-native-testing-library在一个react-native-elements Input组件上使用。组件在编辑时显示清除按钮。

如何点击清除按钮来测试副作用？

这不起作用：

const addressField = component.getByPlaceholder("Address");
addressField.clear();

// TypeError: addressField.clear is not a function

标签： react-native

Answer 1

您可以使用clear option.

handleSearchClear = () => {
this.setState({ query: "" })
}
....
<Input

  placeholder='BASIC INPUT'
  onClear={this.handleSearchClear}
  value={this.state.query}
/>

或者你可以使用ref

this.input.clear();
...
<Input

  placeholder='BASIC INPUT'
  ref={ref => {this.input = ref;}}
  value={this.state.query}
/>