我不知道我在做什麼錯在這裏。 ReactJS對我來說很新,所以我需要一些幫助才能朝正確的方向發展。ReactJS - ToDo應用程序,從列表中刪除項目
我想實現的是當在單個列表項上單擊跨度時,它應該刪除列表項。我在父組件上創建了一個removeHandler函數,並試圖通過道具傳遞函數。
代碼編譯罰款,但是當我嘗試在瀏覽器中運行它,我得到這個在我的控制檯:
Uncaught TypeError: Cannot read property 'props' of undefined
at createTasks (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9556:26)
at Array.map (native)
at Object.render (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9562:33)
at file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13530:21
at measureLifeCyclePerf (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:12809:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13529:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13556:32)
at ReactCompositeComponentWrapper._updateRenderedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13480:36)
at ReactCompositeComponentWrapper._performComponentUpdate (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13458:10)
at ReactCompositeComponentWrapper.updateComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13379:12)
不知道我做錯了, 我有兩個組成部分:
var TodoList = React.createClass({
getInitialState: function() {
return {
items: [] // De initial state (state wanneer het component gemount wordt) voor items wordt aangemaakt en is per definitie leeg.
};
},
addItem: function(e) {
var itemArray = this.state.items;
if(this._inputElement.value){ // Controleer of er een value is gepost. Een lege taak willen we immers niet toevoegen aan de todoItems.
itemArray.push(// Zoja, push dan een een nieuw item aan de itemArray.
{
text: this._inputElement.value, // De text van het volgende item is gelijk aan wat er in het textfield is ingevoerd.
key: Date.now() // De key moet uniek zijn, dus gebruiken we Date.now() voor een zoe goed als unieke key.
}
);
}
this.setState({
items: itemArray // Vervolgens update de state items met itemArray.
});
this._inputElement.value = "";// Het textfield wordt weer leeg gemaakt.
e.preventDefault();
},
handleRemove: function(id){
const remainder = this.state.data.filter((item) => {
if(item.key !== id) return item;
});
this.setState({
items: remainder
});
},
render: function() {
return (
<div className="todoListMain">
<div className="header">
<h3>ToDo lijst webapp</h3>
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a} placeholder="enter task">
</input>
<button type="submit">add</button>
</form>
</div>
<TodoItems remove={this.handleRemove} entries={this.state.items}/>
</div>
);
}
});
及以下:
var TodoItems = React.createClass({
render: function() {
var todoEntries = this.props.entries;
function createTasks(item) {
return <li key={item.key}>{item.text}<span onClick={this.props.handleRemove(item.key)}>X</span></li>
}
var listItems = todoEntries.map(createTasks);
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
雖然這是真實的,它不會導致ER以上列出。 「這個」也沒有正確綁定。 –
謝謝,但這並沒有解決這個錯誤.. –
yup「這個」是未定義的 – David