手写Input.Password与Mentions功能结合组件

import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot; symbol
    if (event.target.value.includes("
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot;)) {
      // Get the substring after the "
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot; symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot;) + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot; symbol
    if (event.target.value.includes("
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot;)) {
      // Get the substring after the "
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot; symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("
import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;
quot;) + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;

手写一个Input.Password与Mentions功能结合的组件

介绍

密码是保护在线帐户安全的关键因素，选择一个安全可靠的密码非常重要。然而，记住所有密码可能非常困难，因此许多人会选择使用相同密码来保护多个账户，这无疑降低了安全性。

为了帮助用户更好地保护在线账户，我们可以结合Input.Password组件和Mention功能来创建一个强大的密码输入组件，该组件允许用户通过输入“$”符号来选择预定义的密码，并支持明密文切换。

实现

1. 创建一个新的React项目。
2. 安装必要的依赖项：

npm install react react-dom

3. 在项目中创建一个新的组件，名为InputPasswordWithMentions.js。
4. 将以下代码粘贴到InputPasswordWithMentions.js文件中：

import React, { useState, useRef } from "react";
import "./styles.css";

const InputPasswordWithMentions = () => {
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [mentions, setMentions] = useState([]);
  const inputRef = useRef(null);

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);

    // Check if the user has entered the "$" symbol
    if (event.target.value.includes("$")) {
      // Get the substring after the "$" symbol
      const mention = event.target.value.substring(
        event.target.value.indexOf("$") + 1
      );

      // Check if the mention is already in the mentions list
      if (!mentions.includes(mention)) {
        // Add the mention to the mentions list
        setMentions([...mentions, mention]);
      }

      // Move the cursor to the end of the input field
      inputRef.current.focus();
    }
  };

  const handleMentionClick = (mention) => {
    // Set the password to the selected mention
    setPassword(mention);

    // Clear the mentions list
    setMentions([]);

    // Move the cursor to the end of the input field
    inputRef.current.focus();
  };

  return (
    <div className="input-password-with-mentions">
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
        value={password}
        onChange={handlePasswordChange}
        ref={inputRef}
      />
      <button type="button" onClick={toggleShowPassword}>
        {showPassword ? "Hide" : "Show"}
      </button>
      {mentions.length > 0 && (
        <ul className="mentions-list">
          {mentions.map((mention) => (
            <li key={mention} onClick={() => handleMentionClick(mention)}>
              {mention}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default InputPasswordWithMentions;

5. 在项目的index.js文件中，导入InputPasswordWithMentions组件并将其渲染到页面上：

import React from "react";
import ReactDOM from "react-dom";
import InputPasswordWithMentions from "./InputPasswordWithMentions";

ReactDOM.render(<InputPasswordWithMentions />, document.getElementById("root"));

6. 在项目中创建一个新的CSS文件，名为styles.css，并将以下代码粘贴到其中：

.input-password-with-mentions {
  display: flex;
  align-items: center;
}

.input-password-with-mentions input {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.input-password-with-mentions button {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.input-password-with-mentions ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.input-password-with-mentions li {
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

7. 启动项目：

npm start

使用

打开浏览器，访问http://localhost:3000，即可看到InputPasswordWithMentions组件。

要使用该组件，只需将其导入到您的项目中并将其渲染到页面上即可。例如：

import InputPasswordWithMentions from "./InputPasswordWithMentions";

const MyComponent = () => {
  return (
    <div>
      <InputPasswordWithMentions />
    </div>
  );
};

结语

InputPasswordWithMentions组件是一个非常有用的工具，它可以帮助用户更好地保护在线账户的安全。该组件易于使用，并且可以与任何React项目集成。