Uncaught TypeError：无法读取未定义的属性“ Checked”-ReactJS

小编典典

Uncaught TypeError：无法读取未定义的属性“ Checked”-ReactJS

reactjs

我正在尝试在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的情况下工作正常。但是，将“已检查”功能分配给它时，会产生错误。

未捕获的TypeError：无法读取未定义的属性“已检查”

提前致谢

阅读 197

2020-07-22

共1个答案

小编典典

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

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

Example

因为现在createItem this是指全球（在浏览器中它会window），得分（或者，如果你使用会）strict mode this``undefined

使用时，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

2020-07-22