Question

    class UserList extends Component{
        constructor() {
            super();
            this.state = {
                list: [],
            };
        }

        componentDidMount() {
            this.getList();
        }

        getList(){
            axios
            .get('/getList')
            .then(response => {
                if(response.data.status == 'success'){
                    this.setState({
                        list: response.data.list,
                    });
                    console.log(response);
                }
            })
            .catch(error => {
                if (error.response) {
                    console.log(error.response);
                  }
            });
        }




{/*I want to call this function with userid when remove button is pressed */}
        deleteUser(){ 

        }

        render(){
            if(!localStorage.getItem('name')){
                return( <Redirect to={'/login'} /> )
            }

            return (
                    <div id="wrapper">
                        <table className="table table-hover">
                            <thead>
                                <tr>
                                    <th>#No</th>
                                    <th>#Name</th>
                                    <th>#Delete</th>
                                </tr>
                            </thead>
                            <tbody>                                                        
                            {
                                this.state.list.map(function(item, i){
                                    return  <React.Fragment>
                                        <tr key={i}>
                                            <td>{item.id}</td>{/* **This is user id** */}
                                            <td>{item.name}</td>
                                            <td>
                                                <button type="button" onClick="deleteUser(item.id)" className="btn btn-danger btn-sm">Remove</button>
                                            </td>
                                        </tr>
                                    </React.Fragment>  
                                })
                            } 
                            </tbody>
                        </table>
                    </div>
            )
        }
    }

    export default UserList;

我是ReactJS的新手。我正在尝试将userid传递给具有onClick事件的“删除”按钮。但是无法发送用户标识，并且显示错误。我该怎么做。谁能帮我这个忙。我正在尝试将userid传递给具有onClick事件的“删除”按钮。但是无法发送用户标识，并且显示错误。我该怎么做。谁能帮我这个忙。我正在尝试将userid传递给具有onClick事件的“删除”按钮。但是无法发送用户标识，并且显示错误。我该怎么做。有人可以帮我吗？

Answer 1

您的处理程序未绑定。您需要这样声明它：

onClick={() => this.deleteUser(item.id)}

因此将其更改为：

{this.state.list.map((item, i) => {
                return  <React.Fragment>
                    <tr key={i}>
                        <td>{item.id}</td>{/* **This is user id** */}
                        <td>{item.name}</td>
                        <td>
                          <button
                            type="button"
                            onClick={() => this.deleteUser("asd")}
                            className="btn btn-danger btn-sm"
                            >
                            Remove
                          </button>
                        </td>
                    </tr>
                </React.Fragment>  
            })}

还有您的处理程序：

deleteUser = (id) => { 
  console.log(id)
}

Answer 2

您可以使用以下方法在ReactJS中调用函数：

<button type="button" onClick={() => deleteUser(item.id)}>...</button>

该函数调用是一个表达式，因此您需要使用{}而不是双引号。

要使它起作用的另一个基本要素是调用它的上下文。当前它位于function内部，就像这样：

.map(function(item, i) {

})

其中this中owns the usage此处的功能因此this.deleteUser将不起作用。要使其正常工作，您需要将function转换为箭头功能has no this binding。

.map((item, i) => {
  return (
    <button type="button" onClick={() => deleteUser(item.id)}>...</button>
  )
})

如何在ReaactJS中的onClick事件上将参数传递给函数

2 个答案: