我這裏有一個反應的應用程序,在許多瀏覽器的工作原理:反應程序清爽頁面爲每個項目刪除
<!DOCTYPE html>
<html>
<head>
<title>React! React! React!</title>
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/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
(真應該是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
列表中的所有項目,而不僅僅是一個項目。
如何在沒有刷新頁面的情況下做出刪除onclick的反應,並一次刪除1個項目?謝謝
是的,這很好。我看到調用'this.createTasks()'''''''''''''''''''''''''''''''''''''''''''''謝謝 – codyc4321
我只想知道爲什麼'this.props.entries.map(createTask.bind(this))'不起作用 – codyc4321
是的,你也可以這樣使用,但是你用錯了,用它像這樣:'this.props.entries.map(this.createTask)'只是傳遞一個回調方法,n在render之外定義'createTask',檢查'jsfiddle'這個:https://jsfiddle.net/g8mshdja/:) –