TypeError：无法读取组件上未定义的属性“值”（ReactJS 表单）答案

【问题标题】：TypeError: Cannot read property 'value' of undefined on components (ReactJS forms)TypeError：无法读取组件上未定义的属性“值”（ReactJS 表单）
【发布时间】：2019-04-12 20:37:38
【问题描述】：

这不是this 的副本，因为我使用的是受控组件，因此它应该有 target.value 。在给出here 的示例之后，我收到此错误，我知道我没有将 onClick 和 onSubmit 与 'this' 绑定，（代码在绑定上运行良好）但我已将 'this.handleChange' 更改为箭头函数 '() => this.handleChange()' 和 handleSubmit 类似。这应该按照给定的here

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

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

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={() => this.handleChange()}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }


ReactDOM.render(<NameForm />, document.getElementById("root"));

【问题讨论】：

应该是this.setState({value: event.target.value}) 而不是this.setState({event.target.value})
在向其他人寻求帮助时，请花时间确保您显示的代码没有基本错误，例如额外的@987654328 @ 在render 之后，@nrgwsth 指出上面的问题，event.target.value 在handleChange 之后的;...所有这些你的浏览器或 IDE 都会告诉你的。使用 Stack Snippets（[<>] 工具栏按钮）创建一个可运行的示例来演示该问题也很有用。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
@T.J.Crowder 已编辑

标签： javascript reactjs jsx

【解决方案1】：

您没有将事件传递给事件处理程序。将onChange={() => this.handleChange()} 更改为onChange={(e) => this.handleChange(e)}。

也应该是this.setState({value: event.target.value}) 而不是this.setState({event.target.value})

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

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

  handleSubmit(event) {
    alert("event was submitted" + this.state.value);
    event.preventDefault();
  }

 render() {
 return (
  <form onSubmit={() => this.handleSubmit()}>
    <label>
      Name:
      <input
        type="text"
        value={this.state.value}
        onChange={(e) => this.handleChange(e)}
      />
    </label>
    <input type="submit" value="Submit" />
  </form>
   );
  }
 }

ReactDOM.render(<NameForm />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

代码中还有一些其他基本的拼写错误，但根本问题是您提到的第二件事：没有传入event。