ReactJS: Как динамически установить отключенную опцию для sortableJS?

Question

Я использую пакет npm react-sortablejs, В моем компоненте я хочу установить disabled вариант динамически. Прямо сейчас мой компонент выглядит так:

class Example extends Component {
    constructor(props) {
        super(props)
        this.state = { }
    }

    render() {
        const   { disabled } = this.props // <-- Boolean value as property

        return (
            <List>
                <Sortable
                    options={{
                        handle   : '.sortable-handle',
                        draggable: '.sortable-item',
                        disabled : disabled // <-- Use the bool value
                    }}
                >
                    <Items>
                </Sortable>
            </List>
        )
    }
}

disabled значение хранится в БД. Если это значение изменяется, сортировка должна быть отключена / включена. Но таким образом это не работает.

Пакет основан на RubaXa/Sortable, Там я могу установить отключенную опцию так:

var sortable = Sortable.create(list);

document.getElementById("switcher").onclick = function () {
    var state = sortable.option("disabled"); // get

    sortable.option("disabled", !state); // set
};

Но как мне сделать это динамически в реагирующем компоненте?

Обновить

Как я это сделал, disabled Опция просто устанавливается изначально при рендеринге компонента. Если значение изменяется после рендеринга, параметр не изменяется, поэтому, если значение изменяется с true в falseопция disabled все еще остается верной.

Answer 1

Я думаю, что вы должны связать всю переменную "option". Судя по отсутствию сопровождающего в реакции-сортировки, он пока еще не привязан к вложенному значению.

попробуй поставить варианты на гос.

 constructor(props) {
        super(props);
        this.state = {
           option : {
                        handle   : '.sortable-handle',
                        draggable: '.sortable-item',
                        disabled : true
                    }
        }
    }

связать вариант государства

 <Sortable options={this.state.option}>
                    <Items>
 </Sortable>

А в ComponentDidUpdate() сделайте это:

componentDidUpdate(prevProps, prevState) {
  if(prevProps.disabled !== this.props.disabled){
    this.setState({option : Object.assign({}, this.state.option, {disabled: this.props.disabled})})
 }
}

Мои внутренности говорят мне, что компонент не распознает отключенное обновление из-за вложенных реквизитов. вся опция должна быть обновлена, чтобы она распознала изменение.

ИЛИ>

вместо этого вы можете передать параметры в качестве реквизита. и обновлять родительский компонент каждый раз, когда отключается изменение.