import React, {useState, useCallback} from 'react';
import './index.scss';

const Login = () => {
  const [inputParams, setInputParams] = useState({
    username: '',
    password: '',
  });

  const handleInputChange = useCallback((e) => {
    const inputName = e.target.name;
    const inputValue = e.target.value;

    setInputParams(prev => {
      console.log(prev);
      return {
        ...prev,
        [inputName]: inputValue
      }
    });
  }, []);

  return (
    <div className="col-md-4 col-md-offset-4">
      <div className="panel panel-default login-panel">
        <div className="panel-heading">欢迎登陆 DOWNZOO CMS</div>
        <div className="panel-body">
          <form>
            <div className="form-group">
              <label htmlFor="exampleInputEmail1">用户名</label>
              <input
                type="text"
                name="username"
                className="form-control"
                id="exampleInputEmail1"
                placeholder="请输入用户名"
                value={inputParams.username}
                onChange={handleInputChange}
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleInputPassword1">密码</label>
              <input
                type="password"
                name="password"
                className="form-control"
                id="exampleInputPassword1"
                placeholder="请输入密码"
                value={inputParams.password}
                onChange={handleInputChange}
              />
            </div>
            <button type="submit" className="btn btn-lg btn-block btn-primary">登陆</button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default Login;

{
  "name": "admin-fe",
  "version": "1.0.0",
  "description": "admin-fe 后台管理系统",
  "main": "index.js",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist": "node_modules/.bin/webpack -p"
  },
  "repository": "git@gitee.com:trueBurger/admin-fe.git",
  "author": "ZhuJianye <borisdunk@sina.com>",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "^5.0.0",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "4.2.2"
  }
}

这要怎么办呀，我所有组件都适用hooks写的，我写的有问题吗，编辑器里没提示呀