reactjs - 如何配置两个单独的单选按钮/复选框

Question

ReactJS 新手在这里。我正在尝试构建一个包含两个单独部分的简单页面：一个单选按钮（具有 3 个值）和一个复选框列表（具有其他 3 个值）。我下面的代码似乎适用于第一部分（单选按钮），但复选框列表已损坏（基本上它不允许我更改选择）。我认为这与事件有关，但我不确定。这是我从一个只有单选按钮部分的示例改编的代码，所以我确定我做错了。

如果您还可以提示如何使这两个部分在页面上看起来是分开的（现在它们都在同一行上），则可以加分。

import React, { Component } from 'react';

class App extends Component {

  constructor() {
    super();
    this.state = {
      capacity: 'EC2',
      workload: 'web-service'
    };

    this.onValChange = this.onValChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  onValChange = (event) => {
    this.setState({
      capacity: event.target.value
    });
  }

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log(this.state.capacity);
    console.log(this.state.workload);
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmitForm}>

              <label>
                <input
                  type="radio"
                  value="EC2"
                  checked={this.state.capacity === "EC2"}
                  onChange={this.onValChange}/>
                    <span>EC2</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Fargate"
                  checked={this.state.capacity === "Fargate"}
                  onChange={this.onValChange}/>
                    <span>Fargate</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Server"
                  checked={this.state.capacity === "Server"}
                  onChange={this.onValChange}/>
                    <span>Server</span>
              </label>

 
              <label>
                <input
                  type="checkbox"
                  value="web-service"
                  checked={this.state.workload === "web-service"}
                  onChange={this.onValChange}/>
                    <span>Web Service</span>
              </label>

              <label>
                <input
                  type="checkbox"
                  value="batch-job"
                  checked={this.state.workload === "batch-job"}
                  onChange={this.onValChange}/>
                    <span>Batch Job</span>
              </label>

              <label>
                <input
                  type="checkbox"
                  value="worker"
                  checked={this.state.workload === "worker"}
                  onChange={this.onValChange}/>
                    <span>Worker</span>
              </label>

              <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;

标签： reactjs

Answer 1

您必须为状态中的复选框维护三个单独的变量。您只能单击一个单选按钮，但您可以单击一个或两个或三个复选框。这是供您参考的代码。

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      capacity: "EC2",
      isWebService: false,
      isBatchJob: false,
      isWorker: false
    };
  }

  onValChange = (event) => {
    this.setState({
      capacity: 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}>
          <label>
            <input
              type="radio"
              value="EC2"
              checked={this.state.capacity === "EC2"}
              onChange={this.onValChange}
            />
            <span>EC2</span>
          </label>

          <label>
            <input
              type="radio"
              value="Fargate"
              checked={this.state.capacity === "Fargate"}
              onChange={this.onValChange}
            />
            <span>Fargate</span>
          </label>

          <label>
            <input
              type="radio"
              value="Server"
              checked={this.state.capacity === "Server"}
              onChange={this.onValChange}
            />
            <span>Server</span>
          </label>

          <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>

          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;