javascript - '$' 未定义 - React 登录表单

标签 javascript jquery reactjs

<分区>

我在我的 React 网络应用程序中收到错误消息“‘$’未定义”。我使用 create-react-app 来初始化应用程序。我读到我需要将 jquery $ 导入我的应用程序,但我不需要将它用于我制作的另一个 React 应用程序。

问题来 self 在 _login() 函数中的行:

const email = $("#email").val()
const password = $("#password").val()

我使用模板文字从输入标签中获取电子邮件和密码的值。从使用 React 16.0 开始,我应该可以不用从 jQuery 导入 $,特别是如果我的其他项目不必这样做的话。

import React, {Component} from 'react';
import styled from 'styled-components';
import axios from 'axios';

const Container = styled.div`
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;

class LoginScreen extends Component {
 constructor(props){
 super(props);
 this.state ={
   clients: [],
   projects: [],
  }
 }

 _login = () => {
  const email = $("#email").val()
  const password = $("#password").val()
  const request = {"auth": {"email": email, "password": password}}
  console.log(request)
  axios.post('http://localhost:3000/api/user_token',
  'auth': request
  ).then(response => {
  console.log(response)
  }).catch(error => console.log(error))
 }

 render(){
 return(
  <Container>
    Login
    <form>
      <label>Email: </label>
      <input
        id="email"
        name="email"
        type="email"
      />
      <label>Password: </label>
      <input
        id="password"
        name="password"
        type="password"
      />
    </form>
    <button
      onClick={this._login}
      >
      Log In
    </button>
  </Container>
  )
 }
}

export default LoginScreen;

包.json

"dependencies": {
"@material-ui/core": "^1.1.0",
"axios": "^0.18.0",
"immutability-helper": "^2.7.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"styled-components": "^3.3.0"
},

最佳答案

您似乎没有在代码中的任何地方引用 jQuery。在您之前的项目中,您可能使用了一个依赖于它的包。请参阅其他问题以供引用:How to use JQuery on ReactJS

关于javascript - '$' 未定义 - React 登录表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50828383/

相关文章:

javascript - 更改包含在 <td> 标记中的某些值的字体颜色

javascript - 如何将文本添加到 Highchart 的底部,但在图例上方?

jQuery 选择器的区别

javascript - jQuery:使用单个函数而不是重复函数来执行类似的操作

reactjs - React 中的状态是什么?

javascript - 过滤值 sapui5 后忙碌指示器不会停止

javascript - 重新分配/更新变量

javascript - 基于国家/地区的 Bootstrap 表单助手状态选择器

reactjs - Material Table React 上的选择和远程数据分页

javascript - 在状态更改之前调用我的函数