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值存储在DB中。如果该值发生更改，则应禁用/启用可排序。但以这种方式是行不通的。

该包基于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，则禁用的-选项仍然保持为真。

Answer 1

我认为你必须绑定整个“选项”变量。从中缺少维护人员来判断，它还没有真正绑定到嵌套值。

试着把选项放到州里。

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

我的内脏告诉我，由于嵌套的道具，组件不识别禁用的更新。必须更新整个选项，以使其识别更改。

OR>

您可以将这些选项作为道具传递。并在每次禁用的组件更改时，对父组件执行更新。