2015-12-16 2 views
2

Hy Я использую response-select для множественного выбора. Я хотел бы preventDefault на удалить близкий вариант, порожденной package.See прикрепленного экрана печати http://i65.tinypic.com/23wlkhz.jpg `response-select.js Multi select preventDefault x button или remove

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); 
} 
}` 
+0

Вы имеете в виду вы хотите удалить кнопку, чтобы не удалить и сделать что-то по вашему выбору, или просто позвонить preventDefault и до сих пор удалить? –

+0

Лучшее решение было бы при нажатии на кнопку close (x) для переопределения функции по умолчанию. пример function onRemove (event) {preventDefault; alert ('do Other thing')} –

ответ

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); 
} 
}