ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.83k stars 443 forks source link

Select cannot use multiple and filterable at the same time. #981

Closed Emiya0306 closed 5 years ago

Emiya0306 commented 5 years ago

Description

Select的multiple, filterMethod不能同时使用。

Reproduce Steps

constructor(props) {
  super(props);

  this.state = {
    options: this.getDefaultOptions(),
    value: {
      value: 'aaaa',
      label: 'aaaa'
    }
  };
  this.handleInput = this.handleInput.bind(this);
  this.handleFilter = this.handleFilter.bind(this);
}

getDefaultOptions() {
  return [{
    value: 'aaaa',
    label: 'aaaa'
  }, {
    value: 'aabb',
    label: 'aabb'
  }, {
    value: 'bbbb',
    label: 'bbbb'
  }, {
    value: 'bbcc',
    label: 'bbcc'
  }, {
    value: 'cccc',
    label: 'cccc'
  }];
}

handleInput(selectedValue) {
  const allOptions = this.getDefaultOptions();
  const value = allOptions.find(item => item.value === selectedValue);
  this.setState({ value });
  console.log(value);
}

handleFilter(query) {
  const allOptions = this.getDefaultOptions();
  const options = query && query !== this.state.value.label
    ? allOptions.filter(item => item.label.toLowerCase().includes(query.toLowerCase()))
    : allOptions;
  this.setState({ options });
}

render() {
  return (
    <Select value={this.state.value.value} multiple={true} filterable={true} filterMethod={this.handleFilter} onChange={this.handleInput}>
      {
        this.state.options.map(el => {
          return <Select.Option key={el.value} label={el.label} value={el.value} />
        })
      }
    </Select>
  )
}

Error Trace (if possible)

Solution

Additional Information

Emiya0306 commented 5 years ago

this.state.value.value是字符串的问题,不是bug。