javascript - 在按钮单击时有条件地格式化 JSX
问题描述
我有一个应用程序,它首先显示基于道具的汽车列表,但单击sort
按钮会将显示转换为按字母顺序排列的列表。
我正在尝试设置一个函数来更改buttonClicked
每次sort
单击按钮的状态(运行sortAlphabetically
.
React 文档中的条件渲染教程侧重于按钮内的文本,但我试图根据是否单击单独的按钮在我的渲染方法中有条件地渲染 JSX。
到目前为止,这是我的代码,它返回Parsing error: this is a reserved word
.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';
import { sortCar } from '../actions/cars';
Component.defaultProps = {
cars: { cars: [] }
}
class Cars extends Component {
constructor(props) {
super(props)
this.state = {
cars: [],
sortedCars: [],
buttonClicked: false
};
}
sortAlphabetically = () => {
handleSortClick();
const newArray = [].concat(this.props.cars.cars)
const orgArray = newArray.sort(function (a,b) {
var nameA = a.name.toUpperCase();
var nameB = b.name.toUpperCase();
if (nameA < nameB) {
return -1;
} else if (nameA > nameB) {
return 1;
}
return 0;
})
this.setState({ cars: {cars: orgArray} })
}
componentDidMount() {
this.props.getCars()
// this.setState({cars: this.props.cars})
}
handleSortClick() {
this.setState({
buttonClicked: !this.state.buttonClicked})
}
render() {
const buttonClicked = this.state.buttonClicked
let display;
if (this.state.buttonClicked = false) {
display = {this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)}
} else {
{this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)}
}
return (
<div className="CarsContainer">
<h3>Cars Container</h3>
<button onClick={this.sortAlphabetically}>Sort</button>
{display}
<CarForm />
</div>
);
}
}
const mapStateToProps = (state) => {
return ({
cars: state.cars
})
}
const mapDispatchToProps = (dispatch) => {
return {
sortCar: (cars) => dispatch(sortCar(cars)),
getCars: (cars) => dispatch(getCars(cars))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Cars);
最终,我正在尝试执行以下操作:
- 将初始状态
buttonClicked
设置为 false - 切换运行
buttonClicked
时的布尔值sortAplhabetically
- 假
this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car}/>)}
时显示 - 为真
{this.props.cars.cars && this.props.cars.cars.map(car => <CarCard key={car.id} car={car} />)}
时显示
任何帮助是极大的赞赏。
解决方案
这是我能想到的最简单的解决方案。您将需要在某些地方替换您自己的代码。但是您的一些代码已被删除,因为它会导致问题并使问题过于复杂。您应该能够在此答案中找到问题的解决方案,但是它不会像复制粘贴那么简单。
你的清单:
- 将 buttonClicked 的初始状态设置为 false:done
- 每当运行 sortAplhabetically 时切换 buttonClicked 的布尔值:而不是这样做,我只是对汽车数组进行排序。
对于其他两个清单项目(由于代码格式问题而省略)。您可能想使用状态,而不是 X 状态,否则为道具。
class Cars extends Component {
constructor (props) {
super(props)
this.state = {
carList: [{ id: 'apple' }, { id: 'orange' }, { id: 'zealot' }]
}
}
sortAlphabetical () {
this.setState({
carList: this.state.carList.reverse()
})
}
render () {
const CarsList = () => {
return this.state.carList.map(car => {
return <li>{car.id}</li>
})
}
return (
<div className='CarsContainer'>
<h3>Cars Container</h3>
<button onClick={this.sortAlphabetical.bind(this)}>Sort</button>
<CarsList />
</div>
)
}
}
注意:我省略了您的一些代码,因为我无法在不访问所有使用的文件的情况下重新创建您的环境。这仍然足以理解基本思想。
推荐阅读
- apache-flex - Adobe Flex 数据宽度问题
- php - Wordpress / PHP:检查帖子是否仅属于一个类别
- r - 循环多个具有相同名称但不同后缀的变量
- javascript - 如何简化包含大量 if 语句的代码以及如何更快地更改图像
- ios - 标签栏应与侧菜单一起显示在所有视图控制器中
- apache-spark - 检查您的集群 UI 以确保工作人员已注册并拥有足够的资源
- json - Swift 中不可读的 JSON 答案
- javascript - 为什么当它是drugguble EXTJS时元素没有创建
- android - 不同机器上相同设备的不同 Settings.Secure.ANDROID_ID
- video-capture - 有没有办法用赛普拉斯手动录制视频?