未捕获的类型错误：无法读取未定义的属性“已检查”-ReactJS

IT技术 javascript reactjs react-jsx
2021-05-18 22:26:02

我正在尝试在 ReactJS 中创建一个简单的 TODO 列表应用程序。我的 React 基础知识不是很清楚，所以我被困在这里。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>React TODO</title>
    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel" lang="ja">
  var TodoList = React.createClass({

    Checked: function(e) {
    alert("Checked");
  },

  render: function() {
    var createItem = function(item) {
      return <li key={item.id}>{item.text}<input type="checkbox" onChange={this.Checked} /></li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }

});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },

  onButtonClick: function(e) {
    this.setState({text: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },

  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onButtonClick} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

ReactDOM.render(<TodoApp />, document.getElementById('example'));
    </script>
    
</body>

   
</html>

生成的每个列表都会为其分配一个复选框。代码在没有 onChange 事件到 Checkbox 的情况下工作正常。但是当“Checked”功能分配给它时，就会产生错误。

未捕获的类型错误：无法读取未定义的属性“已检查”

提前致谢

3个回答

您需要设置this为.map（您可以通过中的第二个参数来做到这一点.map）

return <ul>{this.props.items.map(createItem, this)}</ul>;

Example

因为现在 increateItem this指的是全局（在浏览器中将是window）分数（或者如果您使用将是）strict mode thisundefined

当您使用时，babel您也可以使用箭头函数

var createItem = (item) => {
  return <li key={item.id}>
    {item.text}<input type="checkbox" onChange={this.Checked} />
  </li>;
};

return <ul>{this.props.items.map(createItem)}</ul>;

Example

你可以使用 Alex Solution 但你也可以通过只改变两个地方来实现同样的事情，比如 

var that=this;
var createItem = function(item) {
      return <li key={item.id}>{item.text}<input type="checkbox" onChange={that.Checked} /></li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;

使 createItem 成为 TodoList 类的方法。“this”引用没有被解析，因为它现在是渲染方法的本地函数。附带说明一下，React 遵循驼峰式外壳的处理程序。请将 Clicked 方法重命名为 onChange、onChecked 或 onCheckClicked。

其它你可能感兴趣的问题
上一篇npm start 脚本在安装 create-react-app my-first-react-app 后立即返回错误 下一篇React Native setState 不是函数