mr-component
Version:
A library for Mr components
139 lines (119 loc) • 4.48 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试react-vant Input onChange API</title>
<!-- 加载React 17 -->
<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>
<!-- 加载react-vant -->
<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: 600px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.test-item {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #eee;
border-radius: 4px;
}
.log {
margin-top: 10px;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
color: #666;
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
const { Input } = ReactVant;
function TestApp() {
const [logs, setLogs] = useState([]);
const [value1, setValue1] = useState('');
const [value2, setValue2] = useState('');
const addLog = (message) => {
console.log(message);
setLogs((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
};
const handleChange1 = (...args) => {
addLog(`onChange1 参数个数: ${args.length}`);
args.forEach((arg, index) => {
addLog(` 参数[${index}]: ${typeof arg} - ${JSON.stringify(arg)}`);
});
// 尝试获取值
if (typeof args[0] === 'string') {
setValue1(args[0]);
addLog(` 设置值为: ${args[0]}`);
} else if (args[0] && args[0].target) {
setValue1(args[0].target.value);
addLog(` 从event.target.value获取值: ${args[0].target.value}`);
}
};
const handleChange2 = (...args) => {
addLog(`onChange2 参数个数: ${args.length}`);
args.forEach((arg, index) => {
addLog(` 参数[${index}]: ${typeof arg} - ${JSON.stringify(arg)}`);
});
// 尝试获取值
if (typeof args[0] === 'string') {
setValue2(args[0]);
addLog(` 设置值为: ${args[0]}`);
} else if (args[0] && args[0].target) {
setValue2(args[0].target.value);
addLog(` 从event.target.value获取值: ${args[0].target.value}`);
}
};
const clearLogs = () => setLogs([]);
return (
<div className="container">
<h1>🔍 React-Vant Input onChange API 测试</h1>
<p>在下面的输入框中输入内容，查看onChange事件的参数格式</p>
<div className="test-item">
<h3>测试1: 基础Input</h3>
<Input placeholder="请输入内容" value={value1} onChange={handleChange1} />
<p>当前值: {value1}</p>
</div>
<div className="test-item">
<h3>测试2: 带clearable的Input</h3>
<Input placeholder="请输入内容" value={value2} clearable onChange={handleChange2} />
<p>当前值: {value2}</p>
</div>
<div className="test-item">
<h3>📝 控制台日志</h3>
<button onClick={clearLogs} style={{ marginBottom: '10px' }}>
清除日志
</button>
<div className="log">
{logs.length === 0 ? '暂无日志，请在上面的输入框中输入内容...' : logs.join('\n')}
</div>
</div>
</div>
);
}
ReactDOM.render(<TestApp />, document.getElementById('root'));
</script>
</body>
</html>