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

Posted 2023-02-23

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

【英文标题】：How to achieve minimum character length feature in react material-ui's autocomplete

【发布时间】：2017-10-13 19:33:45

【问题描述】：

我想在 react material-ui autocomplete 组件中实现“最小字符长度”功能。

下面是代码。

constructor(props) 
    super(props);
    this.state = 
      // based on this value, trying to maintain autocomplete's menu state open/close
      shouldOpenList: false, 
    ;
  

// Method in-built
onUpdateInput(searchText, dataSource, params) 

  if( searchText && searchText.length >= 3) 
      this.setState(
          shouldOpenList: true
      )
  


//component props

<AutoComplete 
    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) 
    open=this.state.shouldOpenList // state's value used to show menu
/>

到目前为止，我所了解的是函数 onUpdateInput() 在每次键入时都会被触发，并且它明确显示菜单。 props 'open' 无法处理 state 'shouldOpenList' 值。

如何实现此组件的最小字符长度功能？

提前感谢您的帮助。

【参考方案1】：

也许您可以尝试类似 popoverProps=style: display: 'none' 并使用状态进行更改。

在 AutoComplete 的 source 中，它使 bool 保持打开状态。您的 open prop 只会设置为 componentDidMount 和 componentWillReceiveProps 上的状态。在 componentWillReceiveProps 中，它会检查 this.props.open !== nextProps.open。

所以在这种情况下它会检查 false !== false，这不会触发 setState。我真的不明白他们为什么要添加这个属性，因为它看起来有点没用。也许只是在初始渲染时打开它。

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

编辑：

这个解决方案效果更好

<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。

【讨论】：

当然，我会试试这个并告诉你。 :) 谢谢