ReactJS同表单中多组逻辑独立单选按钮的实现问题

前置说明 #

你当前的代码结构完全支持两组单选按钮完全独立，无需修改整体表单结构，只需要调整几处配置和事件逻辑即可解决问题。

问题根因 #

• 单选按钮组的name属性配置错误：HTML原生规则要求同一组互斥单选按钮必须设置相同的name属性，你当前第一组单选未设置统一name，第二组两个单选的name分别为long-running和event-driven，浏览器不会识别为同一组。
• 单选变更事件逻辑写死：现有onValChange方法仅更新customer字段，点击第二组单选时不会修改programmingmodel的状态值，因此选中状态不会生效。
• 第二组单选缺失value属性：点击时无法拿到正确的选项值更新状态。
• 初始值大小写不匹配：state中customer初始值为individualDev（首字母小写），对应单选的value为IndividualDev（首字母大写），会导致初始选中状态失效。

修复步骤 #

1. 给第一组所有单选按钮添加统一name="customer"，同时把state中customer的初始值调整为和value一致的"IndividualDev"。
2. 给第二组所有单选按钮设置统一name="programmingmodel"，同时给每个单选添加对应的value属性，分别为long-running和event-driven。
3. 改造onValChange方法，根据触发事件的name字段动态更新对应state，适配两组单选的更新需求。

修改后完整代码 #

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      // 修正初始值大小写和单选value匹配
      customer: "IndividualDev",
      programmingmodel: "long-running",
      isWebService: false,
      isBatchJob: false,
      isAiMl: false,
      isDatabase: false,
      isWorker: false,
    };
  }

  // 改造为动态根据name更新对应state
  onValChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  onCheckValChange = (e) => {
    this.setState({ [e.target.name]: e.target.checked });
  };

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log("state", this.state);
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmitForm}>
          <br/>
          <b> Customer segment </b>
          <br/>
          <br/>
          <label>
            <input
              type="radio"
              name="customer"
              value="IndividualDev"
              checked={this.state.customer === "IndividualDev"}
              onChange={this.onValChange}
            />
            <span>Individual Dev </span>
          </label>

          <label>
            <input
              type="radio"
              name="customer"
              value="Startup"
              checked={this.state.customer === "Startup"}
              onChange={this.onValChange}
            />
            <span>Startup </span>
          </label>

          <label>
            <input
              type="radio"
              name="customer"
              value="smallBusiness"
              checked={this.state.customer === "smallBusiness"}
              onChange={this.onValChange}
            />
            <span>Small Business </span>
          </label>

          <label>
            <input
              type="radio"
              name="customer"
              value="mediumBusiness"
              checked={this.state.customer === "mediumBusiness"}
              onChange={this.onValChange}
            />
            <span>Medium Business </span>
          </label>

          <label>
            <input
              type="radio"
              name="customer"
              value="enterpriseIt"
              checked={this.state.customer === "enterpriseIt"}
              onChange={this.onValChange}
            />
            <span>Enterprise IT </span>
          </label>

          <label>
            <input
              type="radio"
              name="customer"
              value="enterpriseLob"
              checked={this.state.customer === "enterpriseLob"}
              onChange={this.onValChange}
            />
            <span>Enterprise LOB </span>
          </label>
          <br/>
          <br/>
          <br/>
          <b> Workload </b>
          <br/>
          <br/>
          <label>
            <input
              type="checkbox"
              name="isWebService"
              checked={this.state.isWebService}
              onChange={this.onCheckValChange}
            />
            <span>Web Service </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isBatchJob"
              checked={this.state.isBatchJob}
              onChange={this.onCheckValChange}
            />
            <span>Batch Job </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isWorker"
              checked={this.state.isWorker}
              onChange={this.onCheckValChange}
            />
            <span>Worker </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isAiMl"
              checked={this.state.isAiMl}
              onChange={this.onCheckValChange}
            />
            <span>AI/ML </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isDatabase"
              checked={this.state.isDatabase}
              onChange={this.onCheckValChange}
            />
            <span>Database </span>
          </label>
          <br/>
          <br/>
          <br/>
          <b> Programming model </b>
          <br/>
          <br/>
          <label>
            <input
              type="radio"
              name="programmingmodel"
              value="long-running"
              checked={this.state.programmingmodel === 'long-running'}
              onChange={this.onValChange}
            />
            <span>Long-running </span>
          </label>
          <label>
            <input
              type="radio"
              name="programmingmodel"
              value="event-driven"
              checked={this.state.programmingmodel === 'event-driven'}
              onChange={this.onValChange}
            />
            <span>Event-driven </span>
            </label>
          <br/>
          <br/>
          <br/>
          <br/>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

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