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

Question

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

这是代码的粗略示例:

<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 组件，该组件有条件地用 Link 包装一个 TextField在 disabled 属性上。

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