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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

I am trying to create a simple a TODO list app in ReactJS. My basics of React are not very clear so I am stuck here.

<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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:31:42+0000

You need set this for .map (you can do that through second argument in .map)

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

Example

because now in createItem this refers to global (in browsers it will be window) score (or if you use strict mode this will be undefined)

as you use babel you also can use 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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags