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注入的 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>
);

試試這個。