如何在reactjs中使用密码锁定代码

import React, { useState } from 'react';

function PasswordLock() {
  const [password, setPassword] = useState('');
  const [locked, setLocked] = useState(true);
  
  // 其他逻辑代码
  
  return (
    // JSX代码
  );
}

<input
  type="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

<button onClick={() => setLocked(!locked)}>
  {locked ? '解锁' : '锁定'}
</button>

{locked ? (
  <p>密码已锁定</p>
) : (
  <p>密码已解锁</p>
)}

import React, { useState } from 'react';

function PasswordLock() {
  const [password, setPassword] = useState('');
  const [locked, setLocked] = useState(true);
  
  return (
    <div>
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={() => setLocked(!locked)}>
        {locked ? '解锁' : '锁定'}
      </button>
      {locked ? (
        <p>密码已锁定</p>
      ) : (
        <p>密码已解锁</p>
      )}
    </div>
  );
}

export default PasswordLock;