[英]React is not rendering the information when onClick event
我正在尝试使用来自另一个模块的信息更新 div。 这是需要呈现信息的名为 Vehicles.js 的文件:(我省略了所有导入以节省空间)
class Vehicles extends React.Component{
render(){
if (this.props.oneVehicle == null) {
return (
<>
<Card className="w-40 align-self-start">
<Card.Body>
<Card.Title>No Vehicle Selected</Card.Title>
<Card.Text>
Click a vehicle on the left to see more details
</Card.Text>
</Card.Body>
</Card>
</>
)
} else {
let { manufacturer, model, fuel, type, color, vin} = this.props.oneVehicle
return(
<div style={{ display: 'block', width: 400, padding: 30 }}>
<Card className="w-50 align-self-start">
<Card.Img variant="top" src={`https://via.placeholder.com/180x150?text=${manufacturer}${model}`} />
<Card.Body>
<Card.Title>{manufacturer} {model}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{vin}</Card.Subtitle>
<Card.Text>
This is a wonderful {fuel}-powered {color} {type}.
</Card.Text>
<Button>Buy Now!</Button>
</Card.Body>
</Card>
</div>
)
}
}
}
export default Vehicles
这是我的 app.js:
类 App 扩展 React.Component {
constructor(props){
super(props);
this.state = {
vehicles: this.generateVehicles(),
selected: null
}
this.handleVehicleSelected = this.handleVehicleSelected.bind(this)
}
generateVehicles() {
let vehicles = []
for (let i = 0; i < 10; i++) {
vehicles.push({
manufacturer: faker.vehicle.manufacturer(),
model: faker.vehicle.model(),
type: faker.vehicle.type(),
fuel: faker.vehicle.fuel(),
vin: faker.vehicle.vin(),
color: faker.vehicle.color()
})
}
return vehicles;
}
handleVehicleSelected(vehicle) {
this.setState({ selected: vehicle })
}
render() {
return (
<Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
<VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected}
selected={this.state.selected}/>
<Vehicles />
</Stack>
);
}
}
export default App
这是生成车辆的地方:
class VehicleList extends React.Component {
oneItem(vehicle) {
return (
<div style={{ display: 'block', width: 400 }}>
<ListGroup>
<ListGroup.Item action active={this.props.selected === vehicle}
onClick={this.props.onVehicleSelected.bind(this, vehicle)}>
{vehicle.manufacturer} {vehicle.model}
</ListGroup.Item>
</ListGroup>
</div>
)
}
render(){
return (
<ListGroup>
{this.props.vehicles.map((v) => this.oneItem(v))}
</ListGroup>
);
}
}
export default VehicleList
一切正常,但 Vehicles.js 部分中的 div 更新。 任何提示我如何解决这个问题?
我认为您忘记将道具oneVehicle
传递给<Vehicles />
<Vehicles oneVehicle={this.state.selected}/>
这将有助于使用所选车辆重新渲染您的Vehicles
组件
render() {
return (
<Stack gap={3} direction="horizontal" className="p-5 col-md-10 offset-md-1">
<VehicleList vehicles={this.state.vehicles} onVehicleSelected={this.handleVehicleSelected}
selected={this.state.selected}/>
<Vehicles oneVehicle={this.state.selected}/>
</Stack>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.