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。但是，当为其分配“已检查”功能时，会生成错误。

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

提前致谢

Answer 1

您需要为this设置.map（您可以通过.map中的第二个参数执行此操作）

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

Example

因为现在在createItem this中指的是全局（在浏览器中它将是window）得分（或者如果您使用strict mode this将{ {1}}）

当您使用undefined时，您也可以使用arrow functions

babel

Example

Answer 2

你可以选择亚力克斯解决方案，但你也可以通过只改变两个地方来实现同样的目标，比如

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

Answer 3

使createItem成为TodoList类的方法。＆＃34;这＆＃34;现在没有解析引用它是render方法的局部函数。另外，React跟随骆驼套管处理。请将Clicked方法重命名为onChange，onChecked或onCheckClicked。

未捕获的TypeError：无法读取未定义的属性'已检查' - ReactJS

3 个答案: