我是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);
}
}
有没有办法做到这一点?谢谢。
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>
)
}
}
对于各个组件,您应该具有不同的状态。
//父组件
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;