Question

我有这个表，每行都有一个复选框，允许用户选择行。在表格的头部，我有一个复选框，可以打开/关闭或表格中的复选框。

为了达到这个目的，我在componentDidMount方法中使用了jquery，但我有一种奇怪的感觉，我做错了......反应本身可以做到这一点。由于我刚刚开始做出反应学习，我需要问你们，我是否可以更优雅地做到这一点。

这是我的代码：

class Products extends Component
{
    componentDidMount()
    {
        const dispatch = this.props.dispatch;
        dispatch( asyncGetProducts() );

        // NOT SURE ABOUT FOLLOWING PART
        var self = this;
        $( '.proucts tbody tr' ).click( function() {
            $( this ).find( '.checkbox' ).checkbox( "toggle" );
        } );

        $( '.proucts * .ui.checkbox' ).checkbox( {
            onChecked: function( el ) {
                if( $( this ).attr( 'name' ) == "toggle_select_all" ) {
                    $( '.proucts * .ui.checkbox' ).checkbox( "set checked" );
                }
            },
            onUnchecked: function() {
                if( $( this ).attr( 'name' ) == "toggle_select_all" ) {
                    $( '.proucts * .ui.checkbox' ).checkbox( "set unchecked" );
                }
            }
        } );
    }

    //  ...rest of code
}

Answer 1

我觉得你做错了。您应该使用React的强大功能，而不是使用jQuery来查找所有元素。如果您已经拥有所有产品的列表，那么请浏览每个模型对象并将boolean设置为true，以便将其呈现为复选框。这比使用jQuery更快。

混合反应代码与jQuery

1 个答案: