Question

我有表格和操作图标'删除'，例如： http://joxi.ru/gmvzWx4CxKbX5m

点击图标后，在我的Redux Action中获取TR并添加“adm-pre-removed”类

import * as types from '../constant/domain.const.js';

export function deleteDomain(event){

    return (dispatch, getState) => {

        (async () => {

            let domainIdElement = event.target.closest('tr'),
                id = domainIdElement.getAttribute('data-id');

            domainIdElement.classList.add('adm-pre-removed');

            setTimeout(() => {
                dispatch({
                    type: types.REMOVE_DOMAIN_SUCCESS,
                    id: id
                })
            }, 3000)



        })()

    }

}

问题是在触发调度状态并且渲染发生但类仍然存在之后。

我知道这不是一种反应方式。而且我真的不想在文章中创建属性并且控制这个类的代码太多了。所有这一课都应该在点击时出现，并在状态发生变化时消失。

你当然可以创建另一个动作并命令事件onMouseDown，但这也是很多代码。

哪个选项是正确的以及如何做到最好？

渲染（Controll视图）

function mapStateToProps (state) {
  return {...state.menu}
}


function mapDispatchToProps(dispatch){
    return {
        ...bindActionCreators({
            ...listMenu,
            ...deleteMenu,
            ...addMenu,
            ...removeError
        }, dispatch),
        dispatch
    }
}

class Menu extends React.Component {

    constructor (props, context) {
        super(props, context);
    }

    componentDidMount() {
        this.props.listMenu()
    }

    componentDidUpdate(){
        //FormHelper.reactReRender('.adm-domain-form');
    }

    render() {
        return (<div>
                    {this.props.errorMessage ? <Notification close={this.props.removeError} errorMessage={this.props.errorMessage} /> : ""}
                    <Sidebar />
                    <MenuPreview {...this.props} />
               </div>);
    }

}

Menu.contextTypes = {
    router: PropTypes.object
}


export default connect(mapStateToProps, mapDispatchToProps)(Menu);

渲染组件：

class MainEventsView extends React.Component {

    render(){

        return (
            <div className="adm-content">
                <Header />
                <div className="container-fluid adm-card-head">
                    <Add {...this.props} />
                    <List {...this.props} />
                </div>
            </div>
        );

    }

}

export default MainEventsView;

渲染列表：

class ListMenu extends React.Component {

    render(){

        return(
            <div className="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div className="adm-card adm-card-table">
                    <div className="table-responsive">
                        {this.props.menu && this.props.menu.length > 0 ? 
                            <Table {...this.props} /> : 
                            <p className="adm-card-table__text-no-available turn-center">Available menu are not found</p>
                        }
                    </div>
                </div>
            </div>
        )

    }

}

export default ListMenu;

渲染表：

class Table extends React.Component {

    render () {
        return (
                <table className="adm-users-table__wrapper-table">
                    <Thead {...this.props} />
                    <Tbody {...this.props} />
                </table>
        );
    }

}


export default Table;

渲染Tbody：

class Cell extends React.Component {

    render () {

        let usersTemplate = this.props[this.props.name].map((item, i) => {
            return (
                <tr key={i} data-id={item.id}>
                    {this.template(item)}
                </tr>
            );
        });

        return (
            <tbody>
               {usersTemplate}
            </tbody>
        );
    }

    template (items) {

        let keyArray = Object.keys(items),
            uniqKey,
            field,
            userCell = keyArray.map((item, i) => {
                uniqKey = i;
                field = items[item] instanceof Object ? _.values(items[item]).join(', ') : items[item];
                return (
                    <td key={i} className="adm-users-table__wrapper-table-data relative-core">{field}</td>
                );
            });

        userCell.push(<Actions key={uniqKey + 1} id={items.id} {...this.props} />)

        return userCell;

    }

}

export default Cell;

Answer 1

也许，它可能是。 React渲染虚拟dom中的元素并以real-dom更新已更改的元素。所以你的班级仍然保持不变。我认为你必须找到另一种方式。

单击React / Redux后，在操作后添加类

1 个答案: