reactjs - react-select.js 多选防止默认 x 按钮或删除

Question

为什么我使用 react 选择进行多重选择。我希望阻止默认删除包生成的关闭选项。请参阅随附的打印屏幕 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);
 }
}`

Answer 1

我认为目前使用 Select 控件不可能实现这一点，除非您想 fork 代码并修改它。

一种不优雅的解决方案是在 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);
 }
}