[英]React- button functionality
I have just started to work on React and have been trying to come up with a To-Do App using raw React, without JSX. 我刚刚开始从事React工作,并一直在尝试使用不带JSX的原始React来开发一个To-Do App。 I have been trying to implement 'Delete' functionality for each of the To-Do item, but it doesn't work.
我一直在尝试为每个待办事项实现“删除”功能,但是它不起作用。 Can someone please help me to understand and implement this 'delete button'
有人可以帮我理解和实现此“删除按钮”吗
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script>
<meta charset="utf-8">
<title>To-Do app</title>
</head>
<body>
<div id="ToDo-app"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script>
var ItemForm = React.createClass({
PropTypes: {
value: React.PropTypes.object.isRequired,
onChange: React.PropTypes.func.isRequired,
onSubmit: React.PropTypes.func.isRequired,
},
onItemInput : function(e) {
this.props.onChange(Object.assign({},this.props.value, {item: e.target.value}));
},
onSubmit: function(e) {
e.preventDefault();
this.props.onSubmit();
},
render: function() {
var errors = this.props.value.errors || {};
return (
React.createElement('form', {onSubmit: this.onSubmit, className: 'ItemForm', noValidate: true},
React.createElement('input', {
type: 'text',
className: errors.item && 'ItemForm-error',
placeholder: 'To-Do item',
onInput: this.onItemInput,
value: this.props.value.item,
}),
React.createElement('button', {type: 'submit'}, "Add Item")
)
);
},
});
var ToDoItem = React.createClass({
PropTypes: {
item: React.PropTypes.string.isRequired,
id: React.PropTypes.string.isRequired,
onSubmit: React.PropTypes.func.isRequired,
},
onSubmit: function(e) {
e.preventDefault();
this.props.onSubmit(this.props.id);
},
render: function() {
return (
React.createElement('li', {className: 'ToDoItem'},
React.createElement('h2', {className: 'ToDoItem-item', onSubmit: this.onSubmit}, this.props.item),
React.createElement('button', {type: 'submit'}, "Delete")
)
);
},
});
var ItemsView = React.createClass({
PropTypes: {
id: React.PropTypes.string.isRequired,
items: React.PropTypes.array.isRequired,
newItem: React.PropTypes.object.isRequired,
onNewItemChange: React.PropTypes.func.isRequired,
onNewItemSubmit: React.PropTypes.func.isRequired,
onDSubmit: React.PropTypes.func.isRequired,
},
render: function() {
var ItemElements = this.props.items
.map(function(item) {
return React.createElement(ToDoItem, item);
});
//alert(ItemElements);
return(
React.createElement('div', {className: 'ItemView'},
React.createElement('h1', {className: 'ItemView-title'}, "To-Do Items"),
React.createElement('ul', {className: 'ItemView-list', onSubmit: this.props.onDSubmit}, ItemElements),
React.createElement(ItemForm, {value: this.props.newItem, onChange: this.props.onNewItemChange,
onSubmit: this.props.onNewItemSubmit,
})
)
);
},
});
var ITEM_TEMPLATE = {item: "", errors: null};
function updateNewItem(item) {
setState({ newItem: item});
};
function submitNewItem() {
var item = Object.assign({}, state.newItem, {key: state.items.length + 1, errors: {}});
if (!item.item) {
item.errors.item = ["Please enter your To-Do item"];
}
setState(
Object.keys(item.errors).length === 0
? {
newItem: Object.assign({}, ITEM_TEMPLATE),
items: state.items.slice(0).concat(item),
}
: { newItem: item }
);
};
function deleteItem(e,item) {
alert("Inside delete func");
var index = state.item.id;
var elements = state.items.splice(index, 1);
setState({items: elements});
};
function navigated() {
setState({
location: window.location.hash});
}
var state = {
items: [
{key: 1, item: "Pay the internet bill"},
{key: 2, item: "Call the team for conference"},
],
newItem: Object.assign({}, ITEM_TEMPLATE),
location: window.location.hash
};
function setState(changes) {
var component;
Object.assign(state, changes);
switch (state.location) {
case '#/items':
//alert("Inside items")
component = React.createElement(ItemsView, Object.assign({}, state, {
onDSubmit: deleteItem,
onNewItemChange: updateNewItem,
onNewItemSubmit: submitNewItem,
}));
break;
default:
component = React.createElement('div', {},
React.createElement('h1', {}, "Let's get this Done!"),
React.createElement('a', {href: '#/items'}, "To Do Items")
);
}
ReactDOM.render(component, document.getElementById('ToDo-app'));
};
// Handle browser navigation events
window.addEventListener('hashchange', navigated, false);
// Start the app
navigated();
</script>
</body>
</html>
Use frontend-boilerplate . 使用前端样板 。 It is a fully To-Do app using React, Redux, Webpack and other commonly tools.
这是一个使用React,Redux,Webpack和其他常用工具的完全待办应用程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.