如何在react&antD中获得正确的索引？

Question

AppUI.js

class AppUI extends Component {
render() {
    return (
        <div>
            <List
                itemLayout="horizontal"
                dataSource={this.props.list}
                renderItem={(item, index) => (
                    <List.Item onClick={(index) => {
                        this.props.handleDelete(index)
                    }}>
                        {item.title}
                    </List.Item>
                )}
            />
        </div>
    )
}

}

App.js

class App extends Component {
constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleStore = this.handleStore.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    store.subscribe(this.handleStore);
}


render() {
    return (
        <AppUI
            handleDelete={this.handleDelete}
            list={this.state.list}
        />
    )
}



handleDelete(index) {
    const action = getDeleteListAction(index);
    store.dispatch(action);
}

handleStore() {
    this.setState(store.getState())

}

}

我的问题是，当我点击每个列表时，我如何才能获得正确的索引我的问题是，当我点击每个列表时，我如何才能获得正确的索引。

  renderItem={(item, index) => (
                        <List.Item onClick={(index) => {
                            this.props.handleDelete(index)
                        }}>
                            {item.title}
                        </List.Item>
                    )}

Answer 1

你的onClick处理程序需要稍作调整，那个param实际上是事件，也就是你最后传入handleDelete的东西。你需要的是类似于

renderItem={(item, index) => (
  <List.Item onClick={() => {
    this.props.handleDelete(index)
  }}>
    {item.title}
  </List.Item>
)}

顺便说一下，从长远来看，可能最好是通过物品本身，然后通过ID或某种标识符来查找。