javascript - 在 ReactJS 组件之间传递值
问题描述
我正在尝试将 id 值从一个组件传递到另一个组件并且有效。但是当我想根据这个 id 获取值时,它会返回 undefined。我想访问 value trains.number。
这是我从中发送值的组件的代码:
class ListStation extends Component {
constructor(props) {
super(props)
this.state = {
stations: []
}
this.addStation = this.addStation.bind(this);
this.editStation = this.editStation.bind(this);
this.deleteStation = this.deleteStation.bind(this);
this.showTrains = this.showTrains.bind(this);
}
deleteStation(id) {
StationService.deleteStation(id).then(res => {
this.setState({ stations: this.state.stations.filter(station => station.id !== id) });
})
}
editStation(id) {
this.props.history.push(`/add-station/${id}`);
}
componentDidMount() {
StationService.getStations().then((res) => {
this.setState({ stations: res.data });
})
}
render() {
return (
<div>
<div className="row">
<table className="table table-striped table-bordered">
<thead>
<tr>
<th>Miasto</th>
<th>Nazwa stacji</th>
<th>Pociągi</th>
<th>Akcja</th>
</tr>
</thead>
<tbody>
{this.state.stations.map(
station =>
<tr key={station.id}>
<td>{station.city}</td>
<td>{station.name}</td>
<td>{station.trains.map(item => item.number)}</td>
{/* {console.log(station.trains.id)} */}
{console.log(station.name)}
<td>
<button onClick={() => this.editStation(station.id)} className="btn btn-info">Modyfikuj</button>
{console.log(this.state.stations)}
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
}
我试图从中获取值的组件如下所示:
class CreateStationComponent extends Component {
constructor(props) {
super(props)
this.state = {
station: {
id: this.props.match.params.id,
city: '',
name: '',
trains: [
{
number: '',
numberOfCarriages: ''
}
]
}
}
this.changeCityHandles = this.changeCityHandles.bind(this);
this.changeNameHandles = this.changeNameHandles.bind(this);
this.saveStation = this.saveStation.bind(this);
}
componentDidMount() {
if (this.state.station.id === '_add') {
return;
} else {
StationService.getStationById(this.state.station.id).then((res) => {
let station = res.data;
this.setState({ name: station.name, city: station.city })
});
}
console.log(this.state.station.name + 'dfddddd');
}
changeCityHandles = (event) => {
this.setState({ city: event.target.value });
}
changeNameHandles = (event) => {
this.setState({ name: event.target.value });
}
saveStation = (e) => {
e.preventDefault();
let station = { city: this.state.city, name: this.state.name }
if (this.state.station.id === '_add') {
StationService.createStation(station).then(res => {
this.props.history.push('/stations');
});
} else {
StationService.updateStation(station, this.state.station.id).then(res => {
this.props.history.push('/stations');
});
}
}
cancel() {
this.props.history.push('/stations');
}
getTitle() {
if (this.state.id === '_add') {
return <h3 className="text-center">Dodaj stację</h3>
} else {
return <h3 className="text-center">Modyfikuj stację</h3>
}
}
render() {
return (
<div>
<div className="container">
<div className="row">
<div className="card-body">
<form>
<div className="form-group">
<input name="city" className="form-control" value={this.state.trains.number} onChange={this.changeCityHandles} />
</div>
{console.log(this.state.trains)}
</form>
</div>
</div>
</div>
</div>
</div >
);
}
}
我在访问值 trains.number 时遇到问题,但是对于不值的值,一切看起来都很好。
解决方案
this.state.station.trains
它是一个数组,因此您需要将其更改为:
<input name="city" className="form-control" value={this.state.station.trains[0].number} onChange={this.changeCityHandles} />
并将changeCityHandles
功能更改为:
changeCityHandles = (event) => {
this.setState({ ...this.state,
station: { city: event.target.value }
});
}
推荐阅读
- ios - Bitmoji 应用的 iOS 应用 URL 方案是什么?
- node.js - HTTPS 与 Nginx 和 Nodejs
- android - React 本机 apk 不在设备上运行
- vba - 从 MS Project 中的 ODBC 获取数据
- python - 编译后 cx_freeze 和 cryptodome 错误
- python - 使用python发送电子邮件时出错
- java - 是否可以在单个项目中的 Maven 模块下添加 Apache Ant 模块作为依赖项
- javascript - 通过单击父项填充 iframe 输入字段
- java - 测试 Java Web 应用程序库的依赖关系
- sql - 选择行直到运行总和达到特定值