如何在 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())

}

}

my question is that how can I get the right index when I click each list
my question is that how can I get the right index when I click each list
my question is that how can I get the right index when I click each list

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

Answer 1

Your onClick handler needs a bit of tweaking, that param is actually the event, which is what you ended up passing into handleDelete. You want something like

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

As a side note, its probably better in the long run to pass the item itself and find by a ID or some sort of identifier