JSX 输入复选框 - JavaScript

在 React 应用程序中，输入复选框是一种常见的表单元素。它们允许用户选择多个选项。本文将介绍如何使用 JSX 创建输入复选框。

JSX 输入复选框示例

下面是一个使用 JSX 创建输入复选框的示例代码：

import React, { useState } from "react";

function App() {
  const [fruits, setFruits] = useState({
    banana: false,
    apple: false,
    orange: false,
  });

  const handleFruitChange = (event) => {
    setFruits({
      ...fruits,
      [event.target.name]: event.target.checked,
    });
  };

  return (
    <div>
      <h1>选择你喜欢的水果</h1>
      <form>
        <label>
          <input
            type="checkbox"
            name="apple"
            checked={fruits.apple}
            onChange={handleFruitChange}
          />
          苹果
        </label>
        <br />
        <label>
          <input
            type="checkbox"
            name="banana"
            checked={fruits.banana}
            onChange={handleFruitChange}
          />
          香蕉
        </label>
        <br />
        <label>
          <input
            type="checkbox"
            name="orange"
            checked={fruits.orange}
            onChange={handleFruitChange}
          />
          橙子
        </label>
      </form>
      <h2>已选择的水果:</h2>
      <ul>
        {Object.keys(fruits).map((fruit) => (
          <li key={fruit}>
            {fruits[fruit] && (
              <span style={{ fontWeight: "bold" }}>{fruit} </span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

代码说明

首先，在应用程序中定义了一个状态变量 fruits，它是一个对象，分别表示了三个水果：苹果，香蕉和橙子。这个对象的值初始化为 false，因为最初没有任何一个水果被选中。

然后，创建了一个 handleFruitChange 函数。当用户点击任何一个复选框时，这个函数将被调用。这个函数使用 setFruits 函数来更新 fruits 对象中对应的属性。

在 render 方法中，创建了一个表单，其中包含三个复选框，每个复选框分别对应一个水果。每个复选框的值（即选中或未选中）由 fruits 对象中对应的属性确定。

当用户点击任何复选框时，onChange 事件将被触发，从而调用 handleFruitChange 函数来更新 fruits 对象。

最后，创建了一个 <ul> 列表，其中包含用户已选择的水果。这个列表通过渲染 fruits 对象的每个属性来创建。如果这个属性的值为 true，则该属性的名称将被加粗显示。

结论

在本文中，我们学习了如何在 React 应用程序中使用 JSX 创建输入复选框。我们创建了一个示例程序，使用 React 的状态和 onChange 事件来处理这些复选框的选中状态。