残りの管理者のカスタムボタン

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> 
); 

はどこボタンがアップ上記（ShowButtonが実装されている方法に類似）<JobCancel/>です。私はボタンをクリックすると、fetch( controller_service/archivedfiles/$ {id} , { method: 'DELETE', body:{} });にします。

これは可能でしょうか？ P.P.私は安心して管理者に新しいです

Answer 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休憩で利用可能なアクションです。

ここに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> 
    ) 
    } 
} 

Answer 2

です：https://github.com/marmelab/admin-on-rest-demo/tree/master/src/reviews