将类添加到React中包含的元素中

Question

我有一个简单的react组件，它有两个按钮。我所要做的就是在包含的div上设置一个类，具体取决于单击哪个按钮.

组件(AddOn) js

import React, { useState } from 'react';

  function AddOns(props) {

  const [isSelected, setSelected] = useState(false);
  const [notSelected, setNotneeded] = useState(false);

  const selectAddon = () => {
    setSelected(!isSelected);
    setNotneeded(false);
  }

  const noAddon = () => {
    setNotneeded(!notSelected);
    setSelected(false);
  }

  return (
    <div className="addon">
      <h2>{props.name} cover</h2>
      <h3>£{props.price} per month</h3>
      <p>{props.description} </p>
      <div className="buttons">
        <button role="radio" onClick={selectAddon} className={isSelected ? "selected" : ""}>Select this cover</button>
        <button role="radio" onClick={noAddon} className={notSelected ? "selected" : ""}>I don't need this</button>
      </div>
    </div>
  );
}

export default AddOns;

一个页面上有多个组件..。

import React, { useState } from 'react';
import AddOn from './AddOns';
import './App.css';

function App() {

  const [extras, setExtras] = useState([
    { name: "Cover 1", price: "1.05", description: "Description goes here", groupName: "lost", groupYes: "group-1", groupNo: "group-2" },
    { name: "Cover 2", price: "2.19", description: "Description goes here", groupName: "abroad", groupYes: "group-3", groupNo: "group-4"},
    { name: "Cover 3", price: "1.53", description: "Description goes here", groupName: "farewell", groupYes: "group-5", groupNo: "group-6" }
  ])

  return (
    <div className="app">
      {extras.map(extra =>(
        <AddOn name={extra.name} price={extra.price} description={extra.description}/>
      ))}
    </div>
  );
}

export default App;

任何帮助，感谢一个完整的新手作出反应！

Answer 1

您不需要使用两个状态来跟踪按钮状态。就用一个。

请查看下面的细节。您可以使用addonSelected来检查选择了哪个按钮。

您可以根据不同的状态设置不同的类名，就像为button实现一样。

import React, {useState} from 'react';

function AddOns(props) {
  const [addonSelected, setAddonSelected] = useState(null);

  const selectAddon = () => {
    setAddonSelected(true);
  };

  const noAddon = () => {
    setAddonSelected(false);
  };

  return (
    <div
      className={`addon${
        addonSelected === true
          ? ' selected'
          : addonSelected === false
          ? ' notSelected'
          : ''
      }`}>
      <h2>{props.name} cover</h2>
      <h3>£{props.price} per month</h3>
      <p>{props.description} </p>
      <div className="buttons">
        <button
          role="radio"
          onClick={selectAddon}
          className={addonSelected === true ? 'selected' : ''}>
          Select this cover
        </button>
        <button
          role="radio"
          onClick={noAddon}
          className={addonSelected === false ? 'selected' : ''}>
          I don't need this
        </button>
      </div>
    </div>
  );
}

export default AddOns;

Answer 2

我建议为div类添加一个变量，然后更改noAddon和selectAddon函数中的值。

Answer 3

我的第一个想法是将className保持在状态，并在每次用户更改选择时更改状态。编辑:刚刚看到您正在尝试编辑不同的div的类名，也编辑了响应。

 import React, { useState } from 'react';
    
      function AddOns(props) {
    
      const [buttonsClass, setButtonClass] = useState('addon');
      const [notSelected, setNotneeded] = useState(false);
    
      return (
        <div className="addon">
          <h2>{props.name} cover</h2>
          <h3>£{props.price} per month</h3>
          <p>{props.description} </p>
          <div className={buttonsClass}>
            <button role="radio" onClick={()=>{()=>setButtonClass('addon')}} className={isSelected ? "selected" : ""}>Select this cover</button>
            <button role="radio"onClick={()=>{()=>setButtonClass('noAddon')}} className={notSelected ? "selected" : ""}>I don't need this</button>
          </div>
        </div>
      );
    }
    
    export default AddOns;