React-Admin：如何在没有 `source` 的情况下访问值？

Question

我正在尝试在 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} />
            ...

Answer 1

我之前没有使用过 react-admin，但是在快速浏览了它的文档之后我了解到

您在 LoginCredentialList 组件中收到的 props 有记录列表
Datagrid 遍历此列表并将单个 record 传递给子 Field 组件
Field 组件接收 record 作为由 react-admin

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

试试这个。

React-Admin：如何在没有 `source` 的情况下访问值？

React-Admin: How can I access a value without `source`?

reactjs

react-admin