Question

我正在学习React.js，试图构建一个todoList应用。因此，在我的组件中，我正在创建一个<li>元素来显示用户在表单中输入的待办事项。我还在其旁边显示一个小删除按钮。我基本上想在用户单击删除按钮时删除该条目。我在组件中创建的函数removeItem()是按钮单击的事件处理程序。但是当我打电话给removeItem()时，我不断收到“ typeEror，removeItem不存在”。我尝试过移动它，完成了this关键字的绑定，使用了箭头功能无济于事。代码如下所示：

var TodoItems = React.createClass({

    removeItem: function() {
        alert("We are removing an Item");////////////
    },

    render: function() {
        var todoEntries = this.props.entries;

        function createTasks(item) {
    return <li key={item.key}>{item.text}<button onClick={() => this.removeItem()} className="deleteBtns">x</button></li> 
        }

        var listItems = todoEntries.map(createTasks);

        return (
            <ul className="theList">
            {listItems}
            </ul>
        );
    }
});

我想念什么？

Answer 1

如果您正在学习做出反应，则可能应该使用最新版本以及class or functional component syntax，而不是scala interpreter which is not recommended。

类似这样的东西：

React.createClass

class TodoItems extends React.Component {
  removeItem = () => {
    alert("We are removing an Item");
  }

  render() {
    return (
      <ul className="theList">
        {this.props.entries.map((item) => (
          <li key={item.key}>
            {item.text}
            <button onClick={this.removeItem} className="deleteBtns">x</button>
          </li> 
        ))}
      </ul>
    );
  }
}

const entries = [
  {text: 'test', key: 1},
  {text: 'test2', key: 2},
];

ReactDOM.render(
  <TodoItems entries={entries} />,
  document.getElementById('app')
);

当存在React

1 个答案: