如何在React Material-UI的自动完成功能中实现最小字符长度功能 [英] How to achieve minimum character length feature in react material-ui's autocomplete

问题描述

我想在react material-ui 自动填充组件.

I want to implement 'min-character-length' feature in react material-ui autocomplete component.

下面是代码.

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()，并且显式显示菜单.道具"open"无法处理状态"shouldOpenList"的值.

What I understand so far is function onUpdateInput() getting fired on typing each time and it is explicitly showing menu. Props 'open' is not able to deal with state 'shouldOpenList' value.

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

How do i achieve min-character-length feature for this component ?

谢谢您的帮助.

推荐答案

也许您可以尝试使用诸如popoverProps = {{style:{display:'none'}}}}之类的东西，并通过状态对其进行更改.

Maybe you can try something like popoverProps={{style: {display: 'none'}}} and change that with state.

在自动完成的源中它将布尔保持在打开状态.您的打开道具只会被设置为componentDidMount和componentWillReceiveProps的状态.在componentWillReceiveProps中，它会检查this.props.open！== nextProps.open.

In the source of AutoComplete it keeps the bool open in it's state. Your open prop will only be set to the state on componentDidMount and in componentWillReceiveProps. In componentWillReceiveProps it checks for this.props.open !== nextProps.open.

因此，在这种情况下，它将检查是否为false！== false，这不会触发setState.我真的不明白为什么他们添加了此属性，因为它似乎没有用.也许只能在初始渲染中将其打开.

So it checks for false !== false in this case, which does not trigger the setState. I dont really understand why they added this property since it seems a bit useless. Maybe only to open it on the initial render.

自动完成的内部handleChange调用onUpdateInput会将组件状态设置为在每次添加字符时打开.完全忽略您的开放财产.

The internal handleChange of AutoComplete which calls onUpdateInput will set the components state to open every time a character is added. Completely ignoring your open 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.

But you will also need to set open to false if the length is less than 3.

这篇关于如何在React Material-UI的自动完成功能中实现最小字符长度功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！