时间戳

首页 > 解决方案 > REACTJS：值未定义

reactjs - REACTJS：值未定义

问题描述

我有三个状态，包括姓名、年龄和电子邮件，其值是手动指定的，以便在三个输入文本字段中显示值。

但是，我也想让输入文本字段中的所有三个值都可编辑。

我收到一个错误age is not defined。我可以知道为什么吗？

这是用于运行以下代码的链接： https ://stackblitz.com/edit/react-zyeeed

import React, { Component } from 'react';
import { render } from 'react-dom';

class Info extends Component {
  constructor(props) {
    super(props);
    state = {
      name = "Jack Sparrow",
      age = "52",
      email = "jacksparrow52@gmail.com"
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    let newState = {...this.state};
      newState[e.target.name] = e.target.name
    this.setState({
      newState
    })
  }

  render() {

    return (
      <div>
        <input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={(e) => this.handleChange(e)} />
        <br /> <br />
        <input type="text" name="age" value={this.state.age} placeholder="Enter your age..." onChange={(e) => this.handleChange(e)} />
        <br /> <br />
        <input type="text" name="email" value={this.state.email} placeholder="Enter your email..." onChange={(e) => this.handleChange(e)} />
        <h3>Output states:</h3>
        <p id="name">Entered Name: {this.state.name}</p>
        <p id="age">Entered Age: {this.state.age}</p>
        <p id="age">Entered Email: {this.state.email}</p>
      </div>

    );
  }
}

render(<Info />, document.getElementById('root'));

标签： reactjs

解决方案

缺少一些东西。

  1. 需要使用this.state
  2. 更正状态属性的分配
  3. 更改newState[e.target.name] = e.target.name为newState[e.target.name] = e.target.value
  4. 更改this.setState({ newState })为this.setState(newState)或this.setState({ ...newState })

我认为这涵盖了它。我做了一个工作示例。希望有帮助！

推荐阅读