我有一个位于绝对位置的返回项数组。它们堆叠在一起，我想知道如何使用react中的onClick方法来迭代。我有两个按钮，当你点击时，一个应该向前，另一个应该向后，但我似乎无法获得它。我想以房子的div为目标，但似乎无法获得选择特定项目的正确代码。我读过关于事件处理的文件，但似乎都不起作用。有人能为我指明正确的方向吗，因为我是React的新手？
这是我的代码：
class Members extends React.Component {
constructor(props) {
super(props);
this.state = {
userInput: null,
senators: [],
represenatives: [],
bills: []
}
}
handleChange = (e) => {
this.setState({
userInput: e.target.value.toUpperCase()
})
}
right = (e) => {
}
componentDidMount() {
const key = `xCaHBd8gI5ZJSOUXWFJGOXZBjJtMbvoIcip0kSmS`
const urls = [`https://api.propublica.org/congress/v1/116/senate/members.json`,
`https://api.propublica.org/congress/v1/102/house/members.json`,
`https://api.propublica.org/congress/v1/statements/latest.json`,
`https://api.propublica.org/congress/v1/bills/search.json`];
let requests = urls.map(url => fetch(url, {
type: "GET",
dataType: 'json',
headers: {
'X-API-Key': key
}
}))
Promise.all(requests)
.then(res => {
return Promise.all(res.map(res => res.json()));
}).then(response => {
this.setState({
senators: response[0].results[0].members,
represenatives: response[1].results[0].members,
bills: response[2].results
})
console.log(this.state.senators)
}).catch(err => {
console.log(err)
})
}
render() {
const { senators, bills, represenatives, userInput } = this.state;
const inSenate = senators.filter(
(senator) => senator.state === userInput
)
const inHouse = represenatives.filter(
(represenative) => represenative.state === userInput
)
const draft = bills.find(
(bill) => bill.name === inSenate.last_name)
return (
<div className="congress">
<div className="users">
<h2>{this.state.userInput}</h2>
<input className="userInput" onChange={this.handleChange} />
</div>
{inSenate.map((senate, i) => {
return (
<div key={senate.id} className="senate">
<h2 className="senateName">Senate</h2>
<ul className="bio">
<h2 >{senate.short_title + " " + senate.first_name + " " + senate.last_name}</h2>
<li>{senate.title}</li>
<li>State: <strong>{senate.state}</strong></li>
<li>Party: <strong>{senate.party}</strong></li>
<li>DOB: <strong>{senate.date_of_birth}</strong></li>
<li>Next Election: <strong>{senate.next_election}</strong></li>
<li>Missed Votes: <strong>{senate.missed_votes}</strong></li>
<li> Votes With Party Percentage: <strong>{senate.votes_with_party_pct + "%"}</strong></li>
<li>Votes Against Party Percentage: <strong>{senate.votes_against_party_pct + "%"}</strong></li>
</ul>
</div>
)
})}
{inHouse.map((rep, i) => {
return (
<div className="house"> //this is what I want to cycle through
<h2 className="numbers" >Your state has {inHouse.length} Represenative(s)</h2>
<h2 >{rep.short_title + " " + rep.first_name + " " + rep.last_name}</h2>
<ul className="bio">
<li >{rep.title}</li>
<li >State: <strong>{rep.state}</strong></li>
<li >Party: <strong>{rep.party}</strong></li>
<li >DOB: <strong>{rep.date_of_birth}</strong></li>
<li >Next Election: <strong>{rep.next_election}</strong></li>
<li >Missed Votes: <strong>{rep.missed_votes}</strong></li>
<li > Votes With Party Percentage: <strong>{rep.votes_with_party_pct + "%"}</strong></li>
<li >Votes Against Party Percentage: <strong>{rep.votes_against_party_pct + "%"}</strong></li>
</ul>
<button className="left btn"></button>
<button onClick={this.right} className="right btn"></button>
</div>
)
})}
</div>
此处已有变量i{inHouse.map((rep, i) => {。
i是数组inHouse中的索引。rep实际上是inHouse[i]，因此可以将索引(i(作为参数传递给onClick函数。
所以这个：
right = (e) => {}
...
<button onClick={this.right} className="right btn"></button>
将被替换为：
right = (index) => {}
...
<button onClick={() => this.right(i)} className="right btn"></button>