例如，我有表格和操作图标“删除”：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 事件，但这也是很多代码。
哪个选项是正确的以及如何最好地做到这一点？
渲染（控制视图）
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;