为什么 onChange 事件在反应中没有 event.keyCode 属性？

Question

我正在尝试使用onChange事件和反应钩子禁用输入文本字段中的空格。我正在保存电子邮件输入状态。onChange事件中的函数调度动作，e.target作为其输入传递。然而，一旦分派发生，输入字段就会被重置。我已经测试了输入字段，它工作正常，但是当我单击键盘空间按钮然后event.keyCodeevent.which 给了我未定义的值。

import React, {useReducer} from 'react';

const initialState = {
    email: ''
};

function reducer(state, action) {
    switch (action.type) {
        case 'email':
            return {
                ...state,
                email: action.payload
            };
        default:
            throw new Error();
    }
}

const Login = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const handleChange = (event) => {
        if (event.keyCode == 32) {
            return false;
        }
        dispatch({ type: event.target.name, payload: event.target.value.trim() });
    }
    return (
        <div className="container">
            <input 
                type="email"
                name="email"
                value={state.email}
                onChange={handleChange}
                placeholder="Enter Email"
            />
        </div>
    )
}

export default Login;

Answer 1

那是因为change不是键盘事件。

如果您想要按下的键，请尝试使用onKeyDown, 。onKeyPressonKeyUp

例如

const Login = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const handleChange = event => {
    dispatch({ type: event.target.name, payload: event.target.value.trim() });
  };
  const handleKeyDown = event => {
    if (event.keyCode === 32) {
      event.preventDefault();
    }
  };
  return (
    <div className="container">
      <input
        type="email"
        name="email"
        value={state.email}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        placeholder="Enter Email"
      />
    </div>
  );
};