Javascript 从物料UI文本字段拨打电话或打开电子邮件客户端

我有一个MaterialUI

TextField

组件，它在某些情况下被禁用并可单击以转到电话号码或电子邮件。在这种情况下，我希望能够单击输入，使其像带有href的锚定标记一样工作，这似乎不是一个选项

下面是代码的大致示例：

{
warn（`Behave like a href to${phone}`）；
}}
/>
或

我需要知道如何允许

TextField

接受和href，或者如何让

onClick

按钮表现得像href。这样做的正确方式是什么

---

这是一个功能性的

您可以使用

window.location.href

。如果需要MUI

链接

组件，可以提取一个

TextFieldLink

组件，该组件基于

禁用的
属性，有条件地使用
链接
包装
文本字段

您可能还需要一个
handleClick
处理程序，它至少为
phone
和
email
提供一些非常基本的验证

免责声明，我以前从未使用过
tel:
属性，但IIUC这正是您想要的


const{TextField，Button，Link}=MaterialUI
const{Fragment，useState}=React
常量应用=（）=>{
const[editMode，setEditMode]=useState（false）；
const[phone，setPhone]=useState（'+11234567890'）；
const[email，setEmail]=useState（'email@email.com');
返回(
设置电话（evt.target.value）}
onClick={（）=>{
如果（！编辑模式）{
window.location.href=`tel:${phone}`；
}
}}
/>
setEmail（evt.target.value）}
onClick={（）=>{
如果（！编辑模式）{
window.location.href=`mailto:${email}`；
}
}}
/>
setEditMode（！editMode）}>
{editMode？'Save'：'Edit'}
);
};
ReactDOM.render（，document.getElementById（'root'））
我对codesandbox进行更改已有相当一段时间了，但我想不出合适的解决方案。然而，这是一个非常有趣的话题