Переключить значок шрифта потрясающе в реагировать JS

Question

Я новичок в react js. У меня есть компонент, где я показываю один значок, который

import React, { Fragment } from 'react';

const Sorting = (props) => {
  return (
    <span className="d-inline-flex">
     <i className="fa fa-angle-down" aria-hidden="true" onClick={() => props.sortData(props.type, 'ascending')}></i>
  )
}
export default Sorting;

Теперь, вот что я хочу сделать, это,

когда есть класс down, то это нисходящий порядок, и если пользователь снова щелкнет по значку, это будет fa-angle-up, и будет вызван щелчок по нему. Таким образом,

что я пытался это

import React, { Fragment } from 'react';

const Sorting = (props) => {
  const toggleAngle = props.toggleAngle ? <i className="fa fa-angle-down sort-icon" aria-hidden="true" onClick={() => props.sortData(props.type, 'ascending', true)}></i> : <i className="fa fa-angle-up sort-icon" aria-hidden="true" onClick={() => props.sortData(props.type, 'descending', false)}></i>
  return (
    <span className="d-inline-flex">
      {toggleAngle}
    </span>
  )
}
export default Sorting;


sortData = (key, order, toggleArrow) => {
    if (order === 'ascending') {
      this.setState({
        toggleAngle: toggleArrow
      })
      this.props.sortAscending(key);
    } else {
      this.setState({
        toggleAngle: toggleArrow
      })
      this.props.sortdescending(key);
    }
  }

Есть ли способ сделать это? спасибо.

Answer 1

Sorting компонент имеет собственное состояние sort.

class Sorting extends React.Componet {
  constructor(props){
    super(props)
    this.state = {sort:'ascending'}
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler(){
    let sort = this.state.sort === 'ascending' ? 'descending' : 'ascending';
    this.setState({
      sort
    })
    this.props.sortData(this.props.type, sort);
  }

  render(){
    return (
      <span className="d-inline-flex">
       <i className={`fa fa-angle-${this.state.sort === 'ascending' ? 'down' : 'up'}`} aria-hidden="true" onClick={this.clickHandler}></i>
    )
  }
}

Answer 2

У вас должно быть другое состояние для отдельных компонентов.

// Родительский компонент

import React from "react";
import SortDataFunc from "./SortDataFunc";

class SortData extends React.Component {
  constructor() {
    super();
    this.state = { toggle: [true, true] };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(index) {
    this.setState(state => {
      return (state.toggle[index] = !state.toggle[index]);
    });
  }
  render() {
    return (
      <div>
        <SortDataFunc
          id="0"
          handleClick={this.handleClick}
          toggled={this.state.toggle[0]}
        />
        <SortDataFunc
          id="1"
          handleClick={this.handleClick}
          toggled={this.state.toggle[1]}
        />
      </div>
    );
  }
}

export default SortData;

// Дочерний компонент

import React from "react";

const SortDataFunc = props => {
  const clickHandler = () => {
    props.handleClick(props.id);
  };
  return (
    <div>
      <i
        className={`fa ${props.toggled ? "fa-angle-down" : "fa-angle-up"}`}
        aria-hidden="true"
        onClick={clickHandler}
      />
    </div>
  );
};
export default SortDataFunc;