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 值存储在数据库中。如果该值发生变化，则 sortable 应为 disabled/enabled。但是这样是行不通的。

该软件包基于 RubaXa/Sortable。在那里我可以像这样设置禁用选项：

var sortable = Sortable.create(list);

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

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

但是我如何在 React 组件中以动态方式做到这一点？

更新

按照我的做法，disabled 选项最初是在渲染组件时设置的。如果渲染后值发生变化，选项不会改变，所以如果值从 true 变为 false，disabled-option 仍然保持为真。

Answer 1

我认为您必须绑定整个 "option" 变量。从 react-sortablejs 缺少维护者来看，它还没有真正绑定到嵌套值。

尝试将选项置于状态。

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

我的直觉告诉我，由于嵌套的道具，组件无法识别禁用的更新。必须更新整个选项，以便它识别更改。

或>

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

ReactJS：如何以动态方式为 sortableJS 设置禁用选项？

ReactJS: How to set disabled option in a dynamic way for sortableJS?

javascript

reactjs

sortablejs