带有href链接的ReactJS TypeScript Mui警报框消息

yvt65v4c 于 2023-02-18 发布在 React

关注(0)|答案(1)|浏览(128)

我在我的应用程序中有MUI警报框。我需要更改内部消息与href URL。当我设置它显示为文本的herf标记时，我想将其显示为链接。
从吹代码，当我点击按钮，它显示href作为文本。我可以知道如何显示它作为html链接？

import * as React from 'react';
import { useState } from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { Alert} from '@mui/material';
import Typography from '@mui/material/Typography';

export default function BasicAlerts() {
  const [message, setMessage] = useState('Form Loaded');

 // function to handle the click event on the link
  const handleLinkClick = () => {
    console.log("inside function")
    var u='<a href="https://www.google.com">Visit Google</a>'
    setMessage("changed : " +u)
  };

  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      
      <Alert variant="outlined" severity="info">
        This is an info alert — check it out!
        
         <Typography>
         <br/>
        {message}{' '}
        <br/>
       
      </Typography>
      </Alert>
      
       <Button onClick={handleLinkClick}>Change</Button>
    </Stack>
  );
}

下面是代码共享链接：https://codesandbox.io/s/ecstatic-smoke-zjp82h

reactjs

来源：https://stackoverflow.com/questions/75485554/reactjs-typescript-mui-alert-box-message-with-href-link

1条答案

按热度按时间

bvjveswy1#

你的状态实际上是一个字符串，在你的点击事件中，你的setMessage("changed : " +u)输出也是一个字符串。所以你的锚点html在<Typography />标签下变成了一个普通的文本。
您可以通过click事件设置href，并根据href将输出显示为普通typgraphy或锚点link。
例如：

对于单击事件操作，您可以执行以下操作：

const [href, setHref] = useState("");
  const [message, setMessage] = useState("Form Loaded");

  // function to handle the click event on the link
  const handleLinkClick = () => {
    console.log("inside function");
    var url = "https://google.com";
    setHref(url);
    setMessage("visit Google");
  };

以及用于在事件动作时呈现改变：

<Alert variant="outlined" severity="info">
        This is an info alert — check it out!
        <Typography>
          <br />
          {href ? (
            <a id="anchor" href={href}>
              {message}
            </a>
          ) : (
            message
          )}
        </Typography>
      </Alert>

赞(0）回复(0）举报 2023-02-18

我来回答

带有href链接的ReactJS TypeScript Mui警报框消息

1条答案

相关问题

热门标签

最新问答