Question

我想创建一个用于获取的自定义按钮。我希望按钮可以像这样使用：

export const LogList = (props) => (
    <List {...props} perPage={100} title="Logs and Reports" filters={< FileFilter/>}>
        <Datagrid>
            <TextField source="inputfile" label="Input File" />
            <TextField source="cycle" label="Cycle" />
            <TextField source="job" label="Job" />
            <TextField source="name" label="File Name" />
            <ShowButton/>
            <JobCancel/>
        </Datagrid>
    </List>
);

我的按钮位于上方<JobCancel/>的位置（类似于ShowButton的实现方式）。我想点击按钮fetch( controller_service / archivedfiles / $ {id} , { method: 'DELETE', body:{} });。

这样的事情可能吗？附：我是休息时管理员的新手

Answer 1

您还可以在演示存储库中找到自定义操作的示例以进行评论（接受，拒绝）：https://github.com/marmelab/admin-on-rest-demo/tree/master/src/reviews

Answer 2

误读了你的问题。所以我正在编辑我的答案。

我的列表视图有自定义按钮。

它是一个简单的Redux连接组件。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RaisedButton from 'material-ui/RaisedButton';
import { editorAssign as editorAssignAction} from '../customActions/EditorAssignActions'
import styles from '../styles/styles'

class EditorAssignButton extends Component {
  constructor(props){
    super(props);
    this.state = { disabled: false };
  }

  handleClick = () => {
    const { editorAssign, record } = this.props
    editorAssign(record.id) //call the action
    this.setState({
      disabled: true
    })
  }
  render() {
    const editorAssignStyle = styles.editorAssignStyle;
    return (<RaisedButton label='Add To Edit'
                          onClick={this.handleClick}
                          disabled={ this.state.disabled }
                          primary={true}
                          />)
  }
}

EditorAssignButton.propTypes = {
  editorAssign: PropTypes.func,
  record: PropTypes.object
}

export default connect(null, {
  editorAssign: editorAssignAction
})(EditorAssignButton)

AOR有关于如何使用Sagas编写自定义动作和触发副作用的文档。

https://marmelab.com/admin-on-rest/Actions.html

DELETE是AOR Rest提供的一项操作，因此您的要求应该非常标准。

这是EditorAssign视图。它是一个简单的列表和数据网格组件

import React from 'react';
import { ReferenceField,
        ChipField,
        SelectInput,
        ReferenceInput,
        TextField,
        List,
        Filter, 
        Datagrid} from 'admin-on-rest';

import AssignTaleEditToSelf from '../buttons/AssignTaleEditToSelf'

const EditorAssignView = (props) => {
    return (
      <List {...props} title="Fresh Tales" perPage={20} sort={{ field: 'id', order: 'ASC' }} filter={{"status": "NEW"}} filters={ <EditorFilter /> } >
        <Datagrid >
          <TextField source="id" label="id" style={{ textAlign: 'center'}} />
          <TextField source="taleTitle" label="Title" />
          <TextField source="taleText" label="Content" style={{maxWidth: '150px'}} />
          <ReferenceField label="Writer" source="writer_id" reference="appUsers">
            <ChipField source="name" />
          </ReferenceField>
          <AssignTaleEditToSelf label="Assign To Self" />
        </CustomDatagrid>
      </List>
    )
  }
}

管理员休息自定义按钮

2 个答案: