2

我正在使用 react-select 进行多选。我希望在删除包生成的关闭选项时阻止默认值。请参阅附加的打印屏幕http://i65.tinypic.com/23wlkhz.jpg `

function renderer(obj, index){
  return <span name='name'>{obj.value}</span>
}
export default  class Select extends Component {
  componentDidMount(){
    this.refs.stateSelect.focus();
  }

  render() {
   const {props} = this;
   const options = props.options;

   return <Select
    {...props}
    allowCreate={true}
    multi={true}
    ref="stateSelect"
    tabIndex={0}
    autofocus
    valueKey='value'
    clearable={false}
    value={props.value}
    options={options}
    valueRenderer = {renderer}
    optionRenderer={renderer}
    onChange={this.onChange}
  />;
}

 onChange(value, selectedOptions){
   this.props.onSelect && this.props.onSelect(selectedOptions);
 }
}`
4

1 回答 1

2

我认为目前 Select 控件不可能做到这一点，除非您想分叉代码并对其进行修改。

一个不优雅的解决方案是在 onChange 侦听器中，将新值与以前的值进行比较，如果某些项目较少，则恢复旧值。如果在您的用例中，您想让用户清除整个列表，但一次不清除一个值，您可以让 onChange 接受新值（如果它为空）。像这样的东西-

export default  class Select extends Component {
  componentDidMount(){
    this.refs.stateSelect.focus();
  }

  componentWillReceiveProps(newProps){
    this.setState({"value":newProps.value}});
  }

  render() {
   const {props} = this;
   const options = props.options;

   return 
   (<Select
    {...props}
    allowCreate={true}
    multi={true}
    ref="stateSelect"
    tabIndex={0}
    autofocus
    valueKey='value'
    clearable={false}
    value={this.state.value}
    options={options}
    valueRenderer = {renderer}
    optionRenderer={renderer}
    onChange={this.onChange}
    />);
}

 onChange(value, selectedOptions){
    if (this.value.length > this.state.value.length
        || this.value == "" //comment this line if you don't want user to clear the entire select
        ){
      this.setState({"value":value});
    }
   this.props.onSelect && this.props.onSelect(selectedOptions);
 }
}
于 2015-12-16T10:05:15.587 回答