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

Question

I'm trying to create a dynamic button in react-admin .
For each button it hits a unique address, how can I do that?

Unfortunately, I have this error: 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>
);

Here is the parent , where the above component is being called or used:

class SPanel extends React.Component {
  render() {
    return (
      <div>
        <Admin dataProvider={restDataProvider}>
          <Resource name="loginCredential" list={LoginCredentialList} />
            ...

Answer 1

I have not worked with react-admin before, but after quickly skimming through its documentation what I understnad is that

• the props you receive in your LoginCredentialList component has list of records
• Datagrid iterates over this list and passes individual record to children Field components
• Field components receives record as prop injected by react-admin

Though react-admin provides many standard Field components, it does not have a ButtonField .

So you can write your own Field component. ( https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component )

Something like:

const ButtonField = ({source, record}) => (
    <Button label="Re-invoke Login" onClick={()=>{
        axios
            .get("http://localhost:8080/admin/"+record[source])
            .then((res)=>console.log(res));
    }}/>
);

And then use it your main component as

export const LoginCredentialList = (props) => (
    <List {...props} pagination={<PostPagination/>}>
        <Datagrid>
            <TextField label="Username" source="username" />
            <ButtonField source="username" />
        </Datagrid>
    </List>
);

Try this out.