React JSON Form Schema Form密码字段显示/隐藏功能实现问询

要给密码字段加显示/隐藏切换功能，你需要自定义一个密码Widget来替换默认的password widget，具体实现步骤如下：

1. 自定义带切换功能的密码Widget #

创建一个React组件，内部维护密码显示状态，通过切换状态控制输入框的type属性，同时添加切换按钮：

import { useState } from 'react';

const PasswordToggleWidget = ({ value, onChange }) => {
  const [showPassword, setShowPassword] = useState(false);

  const handleToggle = () => {
    setShowPassword(prev => !prev);
  };

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
      <input
        type={showPassword ? 'text' : 'password'}
        value={value || ''}
        onChange={(e) => onChange(e.target.value)}
        style={{ padding: '4px', flex: 1 }}
      />
      <button
        type="button"
        onClick={handleToggle}
        style={{ padding: '4px 8px', cursor: 'pointer' }}
      >
        {showPassword ? '隐藏' : '显示'}
      </button>
    </div>
  );
};

export default PasswordToggleWidget;

2. 在表单中配置使用自定义Widget #

在你的表单配置里，把uiSchema中Password字段的ui:widget指定为这个自定义组件：

import Form from '@rjsf/core';
import PasswordToggleWidget from './PasswordToggleWidget';

// 表单Schema
const schema = {
  type: 'object',
  properties: {
    Password: {
      type: 'string',
      title: '密码',
      minLength: 6
    }
  },
  required: ['Password']
};

// UI Schema配置
const uiSchema = {
  Password: {
    'ui:widget': PasswordToggleWidget
  }
};

// 表单组件
const MyForm = () => {
  const handleSubmit = ({ formData }) => {
    console.log('提交的数据:', formData);
  };

  return (
    <Form
      schema={schema}
      uiSchema={uiSchema}
      onSubmit={handleSubmit}
    />
  );
};

export default MyForm;

3. 可选优化（增强体验） #

• 替换为图标按钮：如果使用图标库（如React Icons），可以把文字按钮换成图标，更美观：

  import { FaEye, FaEyeSlash } from 'react-icons/fa';
  
  // 按钮部分替换为：
  <button 
    type="button" 
    onClick={handleToggle} 
    style={{ background: 'none', border: 'none', cursor: 'pointer' }}
  >
    {showPassword ? <FaEyeSlash /> : <FaEye />}
  </button>
  

• 自定义样式：可以通过ui:options传递样式参数，让组件更灵活适配你的项目风格。

内容的提问来源于stack exchange，提问作者Gethziyaljoyce