Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

Question

我正在尝试在 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"函数赋值给它时，会产生错误。

未捕获类型错误：无法读取未定义的属性'Checked'

提前致谢

Answer 1

您需要为 .map 设置 this（您可以通过 .map 中的第二个参数来实现）

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

Example

因为现在 createItem this 指的是全局（在浏览器中它将是 window）分数（或者如果你使用 strict mode this 将是 undefined)

当你使用 babel 你也可以使用 arrow functions

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

Answer 2

使 createItem 成为 TodoList 的方法 class。 "this" 引用没有被解析，因为现在它是 render 方法的一个局部函数。附带说明一下，React 遵循处理程序的骆驼外壳。请将 Clicked 方法重命名为 onChange、onChecked 或 onCheckClicked。

Answer 3

你可以使用 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>;

Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

javascript

reactjs

react-jsx