无法输入反应输入文本字段 - onChange 无法正常工作答案

【问题标题】：Can't type in react Input Text Field - onChange not working properly无法输入反应输入文本字段 - onChange 无法正常工作
【发布时间】：2019-04-11 23:40:31
【问题描述】：

我正在使用 ReactJS 并按照教程创建登录页面，在示例中代码非常直观和通用，我正在尝试模拟函数以从电子邮件和密码输入中获取值，但是当我写文本时立即用空字符串替换。

我已经浏览过类似的帖子，发现逻辑更复杂，不需要它。我想要像 DEMO 这样简单的东西。

我尝试向不同的组件添加 id 以验证它是否有效，但我无法让它工作。

这是代码：

class LoginLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  onUserLogin() {
    if (this.state.email !== "" && this.state.password !== "") {
      this.props.loginUser(this.state, this.props.history);
    }
  }
  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }
  render() {
    return (
      <Fragment>
        <Form>
          <Label className="form-group has-float-label mb-4" id="inputEmail">
            <Input type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </Label>
          <Label className="form-group has-float-label mb-4">
            <Input type="password" id="inputPassword"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </Label>
          <div className="d-flex justify-content-between align-items-center">
            <NavLink to={`/forgot-password`}>
              <IntlMessages id="user.forgot-password-question" />
            </NavLink>
            <Button
              color="primary"
              className="btn-shadow"
              size="lg"
              onClick={() => this.onUserLogin()}
            >
              <IntlMessages id="user.login-button" />
            </Button>
          </div>
        </Form>
      </Fragment>
    );
  }
}
const mapStateToProps = ({ authUser }) => {
  const { user, loading } = authUser;
  return { user, loading };
};

export default connect(
  mapStateToProps,
  {
    loginUser
  }
)(LoginLayout);

【问题讨论】：

就您的变更处理程序而言，您认为 event.target.id 正在解决什么问题？这与您指向该输入的值和该组件上的状态属性名称相比如何？我看到问题是 id 是 inputPassword 但值只是指向密码。尝试将该输入的 id 更改为密码，并实际将电子邮件输入的 id 添加到电子邮件以匹配您的初始状态。
谢谢，我是新来的反应，买了一个模板只修改它。我真的很喜欢让事情变得简单，就像我试图复制的演示一样。你救了我的命。

标签： javascript reactjs forms redux

【解决方案1】：

将值为“email”的id 属性添加到您的电子邮件输入中，并将id 值“inputPassword”更改为“password”。

这样[event.target.id] 动态属性键解析的更改处理程序中的值与组件状态结构的“电子邮件”和“密码”的属性名称匹配。

否则，当前，您正在设置 inputPassword 的状态而不是密码，但将输入受控值属性指向由于不匹配而未更新的密码。此外，email 没有可见的 id 属性，因此根据event.target.id 评估为未定义。

希望对您有所帮助！

【讨论】：

很高兴为您提供帮助。编码愉快！

【解决方案2】：

要解决这个问题，只需像这样进行 handleChange：

import React, { useState } from 'react;
const Input = ()=>{
    const [user,setUser] = useState({ email:'',password:'' });
    const {email,password} = user;
    const   handleChange = (e)=>{
            const {name,value} = e.target;
            setUser({[name]:value});
             }
console.log(user).
return(
<>
 <input onChange = {handleChange} name = "email" value = {email} />
  <input onChange = {handleChange} name = "password" value = {password} />
</>
)
}
export default Input;

它适用于您的所有输入。

【讨论】：