React 输入组件不可编辑

Question

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

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

已验证我的 onChange 事件处理程序的外壳是否正确。
还研究了使用它处理组件上的 z-index 的主题，但它提到了负 z-index 的问题，而没有提到正值。
针对这个确切的问题，研究了 15 个以上关于 SO 的主题——其中大多数都关注 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 时，输入 onchange 事件不会被触发。在此处检查事件阶段 - https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase

React 输入组件不可编辑

React Input Component is not editable

javascript

reactjs

forms

z-index