问同一ReactJS表单中多个逻辑上分离的单选按钮

EN

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      customer: "individualDev",
      programmingmodel: "long-running",
      isWebService: false,
      isBatchJob: false,
      isAiMl: false,
      isDatabase: false,
      isWorker: false,
    };
  }

  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"
              value="IndividualDev"
              name="customer"
              checked={this.state.customer === "IndividualDev"}
              onChange={this.onValChange}
            />
            <span>Individual Dev </span>
          </label>

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

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

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

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

          <label>
            <input
              type="radio"
              value="enterpriseLob"
              name="customer"
              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;