React函数式组件登录页按钮onClick绑定的loginPressed不触发怎么办

第一步：确认事件是否真的未触发 #

先在loginPressed函数第一行加一行打印日志，点击按钮后查看控制台是否有对应输出：

const loginPressed = () => {
  console.log('登录按钮被点击') // 新增该行测试
  // 原有逻辑不变
}

• 有输出：说明事件正常触发，是后续请求逻辑的问题，继续往下看修复点
• 无输出：排查上层元素是否加了e.stopPropagation()阻止冒泡、是否有透明遮罩层挡住了按钮点击区域

第二步：修复代码已知问题 #

• 状态类型初始化错误
  email和password是字符串类型，你当前初始值设为了空数组[]，会导致后续传参不符合后端预期，修改为：

const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');

• 补充请求异常捕获
  当前代码只写了成功回调，请求报错时没有任何提示，会让你误以为事件没触发，优化请求逻辑：

const loginPressed = () => {
  console.log('登录按钮被点击')
  const body = {
    email: email,
    password: password
  }
  axios.post('login', body)
    .then(response => {
      console.log('登录请求成功', response)
    })
    .catch(err => {
      console.error('登录请求失败', err)
    })
}

• 校验请求地址
  你当前用的是相对路径'login'作为请求地址，需要提前给axios配置baseURL，否则会直接拼接当前页面域名作为前缀，大概率出现404错误，配置示例：

// 在import axios之后添加配置
axios.defaults.baseURL = 'http://你的后端接口地址前缀'

内容的提问来源于stack exchange，提问作者mj_