将React.js的Main.jsx转换为纯HTML/CSS/JS的技术求助

原React组件的核心逻辑是：收集用户名和房间名，验证输入不为空后，跳转到带查询参数的/chat页面。用纯HTML可以直接通过表单原生功能实现，不需要用data-value属性（当然如果要做额外数据存储也可以用，但原生表单已经足够满足需求）。

1. 核心实现思路 #

原React里的handleChange是维护输入状态，handleClick是验证输入并生成跳转链接。纯HTML中：

• 用<form>标签的action指定跳转目标/chat，method="GET"会自动把表单字段拼接成URL查询参数（和原React的to={/chat?name=${...}&room=${...}}效果完全一致）。
• 利用HTML5的required属性做基础非空验证，不需要额外JS也能阻止空提交。
• 如果需要和原React完全一致的点击验证逻辑，可以加少量JS辅助。

2. 完整代码示例 #

HTML部分 #

<div class="wrap">
  <div class="container">
    <h1 class="heading">Join</h1>

    <form class="form" action="/chat" method="GET">
      <div class="group">
        <input
          type="text"
          name="name"
          placeholder="Username"
          class="input"
          autocomplete="off"
          required
        />
      </div>
      <div class="group">
        <input
          type="text"
          name="room"
          placeholder="Room"
          class="input"
          autocomplete="off"
          required
        />
      </div>

      <div class="group">
        <button type="submit" class="button">Sign In</button>
      </div>
    </form>
  </div>
</div>

CSS部分（对应原Main.module.css的样式） #

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.heading {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.group {
  display: flex;
  flex-direction: column;
}

.input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.input:focus {
  outline: none;
  border-color: #1877f2;
}

.button {
  padding: 0.8rem;
  background-color: #1877f2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.button:hover {
  background-color: #166fe5;
}

可选JS增强（和原React验证逻辑完全对齐） #

如果不想依赖HTML5的required，可以用JS手动验证：

const form = document.querySelector('.form');
const submitBtn = form.querySelector('.button');

submitBtn.addEventListener('click', (e) => {
  const nameVal = form.querySelector('[name="name"]').value.trim();
  const roomVal = form.querySelector('[name="room"]').value.trim();
  
  if (!nameVal || !roomVal) {
    e.preventDefault();
    alert('请填写完整的用户名和房间名'); // 可以换成自定义样式的提示
  }
});

关于data-value属性 #

可以用，但完全没必要。data-value一般用于存储额外的自定义数据（比如给元素绑定非显示的业务参数），这里表单输入的内容直接通过input的value属性获取即可，原生表单的GET方法会自动处理参数拼接，不需要额外用data-value来传递数据。

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