在反应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并且将调用它的onclick。 所以，

我试过的是

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

对于各个组件，您应该具有不同的状态。

//父组件

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;

Answer 2

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>
    )
  }
}