2

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

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:{} });。

这样的事情可能吗？PS我是新来的管理员休息

4

2 回答 2

2

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

于 2017-07-01T07:24:10.873 回答
1

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

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

这是一个简单的 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>
    )
  }
}
于 2017-06-29T07:28:00.220 回答