[英]React-Admin: How can I access a value without `source`?
我正在尝试在react-admin
创建一个动态按钮。
对于每个按钮,它都会点击一个唯一的地址,我该怎么做?
不幸的是,我有这个错误: props.username is undefined
。
export const LoginCredentialList = (props) => (
<List {...props} pagination={<PostPagination/>}>
<Datagrid>
<TextField label="Username" source="username" />
<Button label="Re-invoke Login"
onClick={() => {
axios.get("http://localhost:8080/admin/" + somehow_read_username_here)
.then((res)=>console.log(res));
}}
/>
</Datagrid>
</List>
);
这是调用或使用上述组件的parent
:
class SPanel extends React.Component {
render() {
return (
<div>
<Admin dataProvider={restDataProvider}>
<Resource name="loginCredential" list={LoginCredentialList} />
...
我之前没有与react-admin
过,但是在快速浏览其文档之后,我不明白的是
LoginCredentialList
组件中收到的props
具有记录列表Datagrid
遍历此列表并将单个record
传递给子Field
组件Field
组件接收record
作为react-admin
注入的 prop 尽管react-admin
提供了许多标准的Field
组件,但它没有ButtonField
。
因此,您可以编写自己的Field
组件。 ( https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component )
就像是:
const ButtonField = ({source, record}) => (
<Button label="Re-invoke Login" onClick={()=>{
axios
.get("http://localhost:8080/admin/"+record[source])
.then((res)=>console.log(res));
}}/>
);
然后将其用作您的主要组件
export const LoginCredentialList = (props) => (
<List {...props} pagination={<PostPagination/>}>
<Datagrid>
<TextField label="Username" source="username" />
<ButtonField source="username" />
</Datagrid>
</List>
);
试试这个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.