如何在反应材料-ui的自动完成中实现最小字符长度功能

Question

我想实现＆＃39; min-character-length＆＃39;反应材料-ui autocomplete组件中的特征。

以下是代码。

<ion-radio>
          <div>Item 1</div>
</ion-radio>

到目前为止我所理解的是函数onUpdateInput（）在每次输入时都会被触发，并且它显式地显示了菜单。道具＆＃39;开放＆＃39;无法处理州＆＃39; shouldOpenList＆＃39;值。

如何为此组件实现min-character-length功能？

提前感谢您的帮助。

Answer 1

也许你可以试试像popoverProps = {{style：{display：＆＃39; none＆＃39;}}}之类的东西，然后用状态改变它。

在自动完成的source中，它保持bool处于打开状态。您的open prop将仅设置为componentDidMount和componentWillReceiveProps中的状态。在componentWillReceiveProps中，它检查this.props.open！== nextProps.open。

因此它检查false！== false，在这种情况下，它不会触发setState。我真的不明白他们为什么添加这个属性，因为它似乎有点无用。也许只是在初始渲染时打开它。

调用onUpdateInput的AutoComplete的内部handleChange将设置每次添加字符时打开的组件状态。完全无视你的开放财产。

修改

此解决方案效果更好

<AutoComplete
  popoverProps={{
    open: this.state.shouldOpenList
  }}
  hintText={props.placeholder}
  dataSource={ props.data }
  dataSourceConfig={ {text: props.text, value: props.value}  }
  className="fabric-autocomplete form-control"
  disableFocusRipple={false}
  filter={filter}
  onNewRequest={ this.onNewRequest.bind(this) }
  onUpdateInput={ this.onUpdateInput.bind(this) }
/>

但如果长度小于3，您还需要将open设置为false。