时间戳

首页 > 解决方案 > 从 Material UI TextField 拨打电话或打开电子邮件客户端

javascript - 从 Material UI TextField 拨打电话或打开电子邮件客户端

问题描述

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

这是代码外观的粗略示例：

<TextField
    value={phone}
    onClick={() => {
        console.warn(`Behave like an href to ${phone}`);
    }}
/>

OR

<TextField
    value={phone}
    href={`tel:${phone}`}
/>

我需要知道如何允许TextField接受和 href 或如何让onClick按钮表现得像一个 href。这样做的正确方法是什么？

这是一个功能示例应用程序，说明我正在使用我所缺少的功能进行操作并指出

标签： javascriptreactjsmaterial-uianchor

解决方案

您可以使用window.location.href. 如果您需要 MUILink组件，您可以提取一个基于propTextFieldLink有条件地包装 aTextField的组件。Linkdisabled

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

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

const { TextField, Button, Link } = MaterialUI
const { Fragment, useState } = React

const App = () => {
  const [editMode, setEditMode] = useState(false);
  const [phone, setPhone] = useState('+11234567890');
  const [email, setEmail] = useState('email@email.com');

  return (
    <div>
      <TextField
        label="Phone"
        disabled={!editMode}
        value={phone}
        onChange={(evt) => setPhone(evt.target.value)}
        onClick={() => {
          if (!editMode) {
            window.location.href = `tel:${phone}`;
          }
        }}
      />
      <TextField
        disabled={!editMode}
        label="Email"
        value={email}
        onChange={(evt) => setEmail(evt.target.value)}
        onClick={() => {
          if (!editMode) {
            window.location.href = `mailto:${email}`;
          }
        }}
      />
      <Button onClick={() => setEditMode(!editMode)}>
        {editMode ? 'Save' : 'Edit'}
      </Button>
    </div>
  );
};


ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

推荐阅读