[英]Pass values between components 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
function 更改為:
changeCityHandles = (event) => {
this.setState({ ...this.state,
station: { city: event.target.value }
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.