React 输入组件不可编辑

Question

问题：我的<input>不可编辑。 我正在将 React 与 Next 一起使用，有一个简单的登录表单，其中只有一个 type="email" 的<input>元素，在我将其移动到模态 window 之前，它一直运行良好。

所以，为了不触发“潜在的重复到......”，让我总结一下我到目前为止所做的尝试：

1. 验证我的 onChange 事件处理程序的大小写是否正确。
2. 还研究了在使用它的组件上处理 z-index 的主题，但它提到了负 z-index 的问题，而没有提到正值。
3. 已经针对这个确切的问题研究了关于 SO 的 15 多个主题——其中大多数都专注于onChange事件处理程序的正确大小写或尝试使用defaultValue代替value 。

该死的，我想我已经尝试了我能在 SO 上找到的所有东西，但仍然遇到无法从键盘输入任何输入的问题（但是，我所有的自动完成选项都会进入输入字段并触发处理程序）。

这是我的“问题”组件的简化代码（删除了样式和不必要的代码）：

import React from "react";

class Login extends React.Component {

state = {login: ""}

  constructor() {
    super();
    this.handleLoginType = this.handleLoginType.bind(this);
  }

  handleLoginType(event) {
    this.setState({ login: event.target.value });
  }

  handleSubmit(event) {
    // handle submit routine
  }

  render() {
    return (
      <Aux>
       <div id="backdrop"></div>
       <div id="loginForm">
          <article>
           <p>Access your account</p>
           <div>
              <form onSubmit={this.handleSubmit} encType="multipart/form-data">
                   <input onChange={this.handleLoginType} 
                          name="login"
                          id="loginEmail"
                          type="email"
                          value={this.state.login}
                    />
                   <button type="submit">Log in</button>
              </form>
          </article>
        </div>
      </Aux>
    );
  }
}

export default Login;

该组件具有 CSS 样式，其 z-index 为 100，背景的 z-index 设置为 50。

---

添加 CodeSandBox 示例： https://codesandbox.io/s/keen-ellis-bjh8f?file=/src/App.js

Answer 1

在这里检查更新的代码是否有效 - http://codesandbox.io/s/mystifying-lovelace-mcdqz

在 app.js 中，您添加了一个事件侦听器，您可以在其中阻止默认行为，在 app.js 中注释第 31 行（event.preventDefault();) 并尝试

当您将 keypressed 事件添加到文档并防止默认行为 keypressed 时，不会触发 input onchange 事件。 在此处检查事件阶段 - https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase