Question

我刚刚开始研究React并且一直试图使用原始React来提供一个To-Do App，而不使用JSX。我一直在尝试实施“删除”＃39;每个待办事项的功能，但它不起作用。有人可以帮助我理解并实施这个删除按钮＆＃39;

<!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>

Answer 1

使用frontend-boilerplate。它是一个使用React，Redux，Webpack和其他常用工具的完全To-Do应用程序。

反应按钮功能

1 个答案: