javascript - Hur kan jag växla en klass vid klick med React?

Jag försöker lista ut hur man växlar en aktiv klass vid klick för att ändra CSS-egenskaper.

Min kod är nedan. Kan någon ge råd om hur jag ska göra detta? Utan att skapa en ny komponent för varje objekt, är det möjligt att göra detta?

class Test extends Component(){

    constructor(props) {
  
    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);
  
  }
  
  addActiveClass() {
    
    //not sure what to do here
    
  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

Svar #1

Använd state. Se React-dokumentationen.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

Svar #2

Du kan också göra detta med krokar.

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': null} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}  

Svar #3

Jag skulle föredra att använda &&-operatorn i ett inline-if-uttryck. Enligt min åsikt ger det en renare kodbas på det här sättet.

Generellt sett skulle du kunna göra något sådant här:

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

Kom bara ihåg att pilfunktioner är en ES6-funktion och kom ihåg att ställa in värdet på this.state.active i klassens konstruktor.

this.state = { active: false }

Eller om du vill injicera CSS i JSX kan du göra det på detta sätt:

<button style={this.state.active && style.button} >button</button>

Och du kan deklarera stil JSON-variabel:

const style = { button: { background:'red' } }

Kom ihåg att använda camelCase på JSX-stilar.

Svar #4

Tja, ditt addActiveClass behöver veta vad som klickades på. Något som detta kan fungera (lägg märke till att jag har lagt till informationen om vilka divs som är aktiva som en state-array, och att onClick nu skickar informationen om vad som klickades på som en parameter, varefter state uppdateras därefter - det finns säkert smartare sätt att göra det på, men du förstår idén).

class Test extends Component(){

  constructor(props) {
    super(props);
    this.state = {activeClasses: [false, false, false]};
    this.addActiveClass= this.addActiveClass.bind(this);
  }

  addActiveClass(index) {
    const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)].flat();
    this.setState({activeClasses});
  }

  render() {
    const activeClasses = this.state.activeClasses.slice();
    return (
      <div>
        <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
          <p>0</p>
        </div>
        <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
          <p>1</p>
        </div>
          <div  onClick={() => this.addActiveClass(2)}>
          <p>2</p>
        </div>
      </div>
    );
  }
}