Question

Hy我正在使用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);
 }
}`

Answer 1

我认为除非您想要分叉代码并对其进行修改，否则目前使用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);
 }
}

react-select.js多选择preventDefault x按钮或删除

1 个答案: