1

我正在使用 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，则 disabled-option 仍然保持为真。

4

1 回答 1

1

我认为您必须绑定整个“选项”变量。从 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})})
 }
}

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

或>

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

于 2017-06-12T10:05:31.983 回答