mr-component

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>调试onChange事件</title>  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  <script src="https://unpkg.com/react-vant@3/lib/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/react-vant@3/lib/index.css" /> <style> body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; padding: 20px; background: #f5f5f5; } .container { max-width: 400px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .test-case { margin-bottom: 20px; padding: 15px; border: 1px solid #eee; border-radius: 4px; } .console-output { background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; max-height: 200px; overflow-y: auto; } button { background: #1989fa; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState, useEffect } = React; const { Input } = window.ReactVant; function App() { const [logs, setLogs] = useState([]); const [inputValue, setInputValue] = useState(''); const addLog = (message) => { const timestamp = new Date().toLocaleTimeString(); setLogs((prev) => [...prev, `[${timestamp}] ${message}`]); }; const clearLogs = () => setLogs([]); useEffect(() => { addLog('页面加载完成'); addLog(`react-vant版本检查: ${window.ReactVant ? '✅ 已加载' : '❌ 未加载'}`); addLog(`Input组件: ${Input ? '✅ 可用' : '❌ 不可用'}`); }, []); const handleInputChange = (...args) => { addLog(`onChange被调用，参数数量: ${args.length}`); args.forEach((arg, index) => { addLog(` 参数${index + 1}: ${typeof arg} = ${JSON.stringify(arg)}`); }); // 尝试不同的方式获取value if (args.length > 0) { const firstArg = args[0]; if (typeof firstArg === 'string') { addLog(` --> 直接字符串值: "${firstArg}"`); setInputValue(firstArg); } else if (firstArg && firstArg.target) { addLog(` --> 事件对象，target.value: "${firstArg.target.value}"`); setInputValue(firstArg.target.value); } else if (firstArg && typeof firstArg.value !== 'undefined') { addLog(` --> 对象值: "${firstArg.value}"`); setInputValue(firstArg.value); } } }; return React.createElement( 'div', { className: 'container' }, React.createElement('h1', null, '🔍 React-Vant Input onChange调试'), // 测试1: 基本Input React.createElement( 'div', { className: 'test-case' }, React.createElement('h3', null, '1. 基本 Input'), React.createElement('div', null, `当前值: "${inputValue}"`), React.createElement(Input, { placeholder: '请输入内容测试onChange', value: inputValue, onChange: handleInputChange, style: { width: '100%' }, }), ), // 测试2: 不同类型的Input React.createElement( 'div', { className: 'test-case' }, React.createElement('h3', null, '2. number类型 Input'), React.createElement(Input, { type: 'number', placeholder: '请输入数字', onChange: (...args) => { addLog(`number Input onChange: ${args.length}个参数`); args.forEach((arg, i) => addLog(` [${i}]: ${typeof arg} = ${JSON.stringify(arg)}`), ); }, style: { width: '100%' }, }), ), // 日志显示 React.createElement( 'div', { className: 'test-case' }, React.createElement('h3', null, '📝 控制台日志'), React.createElement('button', { onClick: clearLogs }, '清除日志'), React.createElement( 'div', { className: 'console-output' }, logs.map((log, index) => React.createElement('div', { key: index }, log)), ), ), ); } ReactDOM.render(React.createElement(App), document.getElementById('root')); </script> </body> </html>