0

我遇到的问题是我有一个按钮:

const LogActions = ({ resource, filters, displayedFilters, filterValues, basePath, showFilter, refresh, record }) => (
    <CardActions style={cardActionStyle}>
        <RaisedButton primary label="Cancel" onClick={HandleClick(record["id"])} />/>
    </CardActions>
);

此按钮在 List 中使用,如下所示:

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/>
            <LogActions/>
        </Datagrid>
    </List>
);

这是 HandleClick:

const HandleClick = (id) => {
        fetch(`controller_service/archivedfiles/${id}`, { method: 'GET', body:{} })
            .then(() => {
                // do stuff
            })
            .catch((e) => {
                console.error(e);
                //error
            });
    }

好的,所以我的问题是,每当我转到此页面时,它都会创建数据网格,但是在呈现按钮时它会调用HandleClick它然后在我单击按钮之前获取该数据,并且当我单击按钮时没有任何反应. 有人可以解释我做错了什么吗?

4

1 回答 1

0

正如 wesley6j 所说,当您为其分配参数时,该函数会被调用。避免这种情况的一种方法是使用.bind(this,params)或包装你HandleClick的另一个函数,如下所示:

onClick={() => HandleClick(record["id"])}
于 2017-07-03T12:55:13.773 回答