Question

我在这里有一个适用于许多浏览器的反应应用程序：

<!DOCTYPE html>
<html>
  
<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  
  <style>
    body {
      padding: 50px;
      background-color: #66CCFF;
      font-family: sans-serif;
    }
    .todoListMain .header input {
      padding: 10px;
      font-size: 16px;
      border: 2px solid #FFF;
    }

    .todoListMain .header button {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
      background-color: #0066FF;
      color: #FFF;
      border: 2px solid #0066FF;
    }

    .todoListMain .header button:hover {
      background-color: #003399;
      border: 2px solid #003399;
      cursor: pointer;
    }

    .todoListMain .theList {
        list-style: none;
        padding-left: 0;
        width: 255px;
    }

    .todoListMain .theList li {
        color: #333;
        background-color: rgba(255,255,255,.5);
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
    }
  </style>
</head>
  
<body>
  
  <div id="container">
  
  </div>
  
  <script type="text/babel">
    var destination = document.querySelector("#container");

    // es6 is working in the browser :)
    let y = [1, 3, 6, 15, 39, 88].find(x => x > 39 && x < 90)

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

            function createTask(item){
                return (
                    <li key={item.key}>
                        <span>{item.text}</span>
                        <a  href="" data-id="{item.id}"
                            className="remove-filter"
                            onClick={this.props.remove.bind(item)}
                        >
                            remove
                        </a>
                    </li>
                )
            }

            // var listItems = todoEntries.map(createTask.bind(this));

            return (
                <ul className="theList">
                    {this.props.entries.map(createTask.bind(this))}
                </ul>
            );
        }
    });

    var TodoList = React.createClass({
        getInitialState: function(){
            return {
                items: []
            };
        },

        addItem: function(e) {
            var itemArray = this.state.items;
            itemArray.push(
                {
                    text: this._inputElement.value,
                    key: this.state.items.length
                }
            );
            this.setState({
                items: itemArray
            })
            this._inputElement.value = "";
            e.preventDefault();
        },

        // removing items from a list
        // https://stackoverflow.com/questions/27817241/how-to-remove-an-item-from-a-list-with-a-click-event-in-reactjs
        removeItem: function(item, event){
            event.preventDefault();

            var items = this.state.items.filter(function(itm){
                return item.id !== itm.id;
            });

            this.setState({ items: items });
        },

        render: function() {
            return (
                <div className="todoListMain">
                    <div className="header">
                        <form onSubmit={this.addItem}>
                            <input ref={(a) => this._inputElement = a}
                                placeholder="enter task" />
                            <button type="submit">add</button>
                        </form>
                    </div>
                    <TodoItems remove={this.removeItem} entries={this.state.items} />
                </div>
            );
        }
    });

    ReactDOM.render(
      <div>
        <TodoList/>
      </div>,
      destination
    );
  </script>
</body>
  
</html>

我已经关注how to remove an item from a list with a click event in ReactJS?，似乎工作正常，但有一些问题。

首先，示例引用<a href data-...，但这不起作用，并将我重定向到file:///Users/cchilders/tutorials/javascript/react/todo-list/true，它从评估的内容中获取true（true应为index.html }）

删除工作使用href=""，但它以丑陋的方式闪烁页面，通常的嫌疑人使href什么都不起作用......

...如果我尝试href="#"或href="javascript:;"和类似的我得到

embedded:60 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

其次，我正在收到警告

react.js:20478 Warning: bind(): React component methods may only be bound to the component instance. See TodoList

无论如何，我尝试的每一件事。

第三，它删除remove列表中的所有项目，而不只是1项目。

如何在不刷新页面的情况下进行此删除操作，并一次删除1个项目？谢谢

Answer 1

您需要更改的内容很少，请查看jsfiddle的工作示例，相应地更改您的代码。

*不要这样写：{this.props.entries.map(createTask.bind(this))} 而不只是从{this.createTask()}调用方法render，该函数将返回完整列表，在render方法之外定义createTask。像这样：

createTask: function(){
  return this.props.entries.map(item=>{
    return (
      <li key={item.key}>
        <span>{item.text}</span>
        <a  href="#" data-id="{item.id}"
                className="remove-filter"
                onClick={()=>this.props.remove(item)}
        >
            remove
        </a>
      </li>
  )})
},

*你忘了给href的死链接，不要把它留空，如下所示定义：href="#"。

*不要将道具remove方法与onClick绑定，请像普通方法调用一样使用它，如下所示：onClick={()=>this.props.remove(item)}。

检查jsfiddle：https://jsfiddle.net/79eax14s/

如果你需要任何帮助，请告诉我。

为每个项目删除反应应用刷新页面

1 个答案: