javascript - 如何在React Material-UI自动完成中实现最小字符长度功能

Question

我想在 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() 在每次键入时都会被触发，并且它明确显示菜单。 Prop “open”无法处理状态“shouldOpenList”值。

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

感谢您提前提供帮助。

Answer 1

也许您可以尝试类似 popoverProps={{style: {display: 'none'}}} 并通过状态更改它。

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

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

AutoComplete的内部handleChange调用onUpdateInput，将在每次添加 Angular 色时将组件状态设置为打开。完全忽略您的开放属性(property)。

编辑:

这个解决方案效果更好

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