React中点击按钮如何仅展示对应车辆的预订表单？

问题根源 #

你的所有车辆共用同一个布尔类型的showForm全局状态，只要状态为true，所有可用车辆的表单显示判断都会命中，导致所有表单同时展示。

修改方案 #

我们把状态从「是否展示表单」改成「当前选中要预订的车辆ID」，只有当遍历到的车辆ID和状态中存储的ID一致时，才展示对应表单。
具体修改点如下：

1. 调整state结构，存储选中的车辆ID，初始值为null
2. 点击预订按钮时，把当前点击的车辆ID存入state
3. 修改表单显示判断逻辑，仅匹配ID时才渲染表单
4. 修复代码里的两个小问题：map遍历的key绑定位置错误、React里要使用className代替原生class属性

完整修改后代码 #

import React from "react";

const cars = [
  {
    id: 1,
    name: "Mruti",
    price: 5.2,
    available: false,
    rental_price: 5000,
    type: "Hatchback",
  },
  {
    id: 2,
    name: "Rnault",
    price: 5.2,
    available: true,
    rental_price: 3000,
    type: "SUV",
  },
  {
    id: 3,
    name: "Adi",
    price: 5.2,
    available: false,
    rental_price: 5000,
    type: "SUV",
  },
  {
    id: 4,
    name: "Hundai",
    price: 209,
    available: false,
    rental_price: 100000,
    type: "Luxury",
  },
  {
    id: 5,
    name: "Aton",
    price: 500,
    available: true,
    rental_price: 500000,
    type: "Luxury",
  },
  {
    id: 6,
    name: "Ercedes",
    price: 35,
    available: false,
    rental_price: 50000,
    type: "Sedan",
  },
  {
    id: 7,
    name: "BMW",
    price: 32,
    available: false,
    rental_price: 50000,
    type: "Hatchback",
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    // 改为存储当前选中的车辆ID，初始为空
    this.state = { activeCarId: null };
  }

  showForm = () => {
    return (
      <div>
        <form id="add-app">
          <label>Price : </label>
          <input type="text" />

          <label> Hours : </label>
          <input type="text" />

          <button>Book</button>
        </form>
      </div>
    );
  };

  render() {
    return (
      <div className="product">
        {cars.map((car) => (
          // key绑定到map遍历的最外层元素，class改为className
          <div className="product_info" key={car.id}>
            <p>{car.name}</p>
            <p>{car.price}</p>
            <p>
              {car.available === true ? (
                <>
                  <p>Available</p>
                  <button
                    onClick={() => {
                      // 点击时存入当前车辆的ID
                      this.setState({activeCarId: car.id})
                    }}
                  >
                    Rent car
                  </button>
                  {/* 只有当前车辆ID和选中ID一致时才展示表单 */}
                  {this.state.activeCarId === car.id ? this.showForm() : null}
                </>
              ) : (
                <p>Unavailable</p>
              )}
            </p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

如果需要关闭表单，只需要在提交表单的逻辑里加一行this.setState({activeCarId: null})即可。

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