从 Material UI TextField 调用 phone 或打开电子邮件客户端

Question

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

下面是代码的粗略示例：

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

OR

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

我需要知道如何允许 TextField 接受和 href，或者如何使 onClick 按钮的行为像 href。这样做的正确方法是什么？

这是一个函数sample app of what I am doing with the features I am missing pointed out

Answer 1

您可以使用 window.location.href。如果您需要 MUI Link 组件，您可以提取一个 TextFieldLink 组件，该组件根据 disabled prop.[=22] 有条件地用 Link 包装 TextField =]

您可能还需要一个 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>

从 Material UI TextField 调用 phone 或打开电子邮件客户端

Call phone or open email client from Material UI TextField

javascript

anchor

reactjs

material-ui