Question

我正在尝试扩展Buckyrobert的reactjs示例。我遇到了两个问题：

如何编写“toggle all”功能以将所有组件置于编辑模式？
这看起来像一个扁平的错误。一个。运行以下。湾添加三个新组件。 C。编辑中间一个（即＃2）并输入“2”。 d。单击“保存”，然后再次单击中间的“编辑”。即删除第一个组件。

查看问题。

~~~

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React - Template</title>
    <script src="../../js/react.js"></script>
    <script src="../../js/react-dom.js"></script>
    <script src="../../js/browser.min.js"></script>
    <link rel="stylesheet" href="../../css/main.css">
</head>
<body>

    <div id="container"></div>

    <script type="text/babel">
        var Comment = React.createClass({
            getInitialState: function () {
                console.log("initial: " + this.props.index + ":" + this.props.editing);
                return {editing: this.props.toggleFlag}
            },

            edit: function() {
                console.log("editing ");
                this.setState({editing: true});
            },

            save: function() {
                var val = this.refs.newText.value;
                console.log("save: " + val);
                this.props.saveComment(this.props.index, val);
                this.setState({editing: false});
            },

            remove: function() {
                console.log("removing ");
                this.props.removeComment(this.props.index);
            },

            cancel: function() {
                console.log("cancel");
                this.setState({editing: false});
            },

            renderForm: function() {
                return (
                        <div className="commentContainer">
                            <textarea ref="newText" className="commentText" defaultValue={this.props.children}></textarea>
                            <button onClick={this.save} className="button-primary">Save</button>
                            <button onClick={this.cancel} className="button-danger">Cancel</button>
                        </div>

                )
            },

            renderNormal: function() {
               return (
                   <div className="commentContainer">
                       <div ref="newText" className="commentText">{this.props.children}</div>
                       <button onClick={this.edit} className="button-primary">Edit</button>
                       <button onClick={this.remove} className="button-danger">Remove</button>
                   </div>
               )
            },

            render: function () {
                if (this.state.editing) {
                    return this.renderForm();
                } else {
                    return this.renderNormal();
                }
            }
        });

        var Board = React.createClass({
            getInitialState: function () {
                return {
                    toggleFlag: false,
                    comments: [
                    ]
                }
            },

            add: function (text) {
                console.log(typeof(text));
                if (typeof(text) != "string") {
                    text = "";
                }
                console.log("add: " + text);
                var arr = this.state.comments;
                arr.push(text);
                this.setState({comments: arr});
            },

            remove: function(i) {
                console.log("removing: " + i);
                var arr = this.state.comments;
                arr.splice(i, 1);
                this.setState({comments: arr});
            },

            save: function(i, newText) {
                console.log("saving: " + i);
                var arr = this.state.comments;
                arr[i] = newText;
                this.setState({comments: arr});
            },

            toggle: function () {
                var newToggle = !this.state.toggleFlag;
                this.setState({toggleFlag: newToggle});
                console.log(newToggle);
            },

            eachComment: function (text, i) {
                console.log("each: " + i + ":" + this.state.toggleFlag);
                return (
                    <Comment key={i} index={i} saveComment={this.save} removeComment={this.remove} toggleFlag={this.state.toggleFlag}>{text}</Comment>
                )
            },

            render: function () {
                return (
                    <div>
                        <button className="button-info create" onClick={this.add}>Add New</button>
                        <button className="button-info" onClick={this.toggle}>Toggle Edit</button>
                        <div className="board">
                            {
                                this.state.comments.map(this.eachComment)
                            }
                        </div>
                    </div>
                )
            }
        });

        ReactDOM.render(
            <Board/>,
            document.getElementById('container'));
    </script>

</body>
</html>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React - Template</title>
    <script src="../../js/react.js"></script>
    <script src="../../js/react-dom.js"></script>
    <script src="../../js/browser.min.js"></script>
    <link rel="stylesheet" href="../../css/main.css">
</head>
<body>

    <div id="container"></div>

    <script type="text/babel">
        var Comment = React.createClass({
            getInitialState: function () {
                console.log("initial: " + this.props.index + ":" + this.props.editing);
                return {editing: this.props.toggleFlag}
            },

            edit: function() {
                console.log("editing ");
                this.setState({editing: true});
            },

            save: function() {
                var val = this.refs.newText.value;
                console.log("save: " + val);
                this.props.saveComment(this.props.index, val);
                this.setState({editing: false});
            },

            remove: function() {
                console.log("removing ");
                this.props.removeComment(this.props.index);
            },

            cancel: function() {
                console.log("cancel");
                this.setState({editing: false});
            },

            renderForm: function() {
                return (
                        <div className="commentContainer">
                            <textarea ref="newText" className="commentText" defaultValue={this.props.children}></textarea>
                            <button onClick={this.save} className="button-primary">Save</button>
                            <button onClick={this.cancel} className="button-danger">Cancel</button>
                        </div>

                )
            },

            renderNormal: function() {
               return (
                   <div className="commentContainer">
                       <div ref="newText" className="commentText">{this.props.children}</div>
                       <button onClick={this.edit} className="button-primary">Edit</button>
                       <button onClick={this.remove} className="button-danger">Remove</button>
                   </div>
               )
            },

            render: function () {
                if (this.state.editing) {
                    return this.renderForm();
                } else {
                    return this.renderNormal();
                }
            }
        });

        var Board = React.createClass({
            getInitialState: function () {
                return {
                    toggleFlag: false,
                    comments: [
                    ]
                }
            },

            add: function (text) {
                console.log(typeof(text));
                if (typeof(text) != "string") {
                    text = "";
                }
                console.log("add: " + text);
                var arr = this.state.comments;
                arr.push(text);
                this.setState({comments: arr});
            },

            remove: function(i) {
                console.log("removing: " + i);
                var arr = this.state.comments;
                arr.splice(i, 1);
                this.setState({comments: arr});
            },

            save: function(i, newText) {
                console.log("saving: " + i);
                var arr = this.state.comments;
                arr[i] = newText;
                this.setState({comments: arr});
            },

            toggle: function () {
                var newToggle = !this.state.toggleFlag;
                this.setState({toggleFlag: newToggle});
                console.log(newToggle);
            },

            eachComment: function (text, i) {
                console.log("each: " + i + ":" + this.state.toggleFlag);
                return (
                    <Comment key={i} index={i} saveComment={this.save} removeComment={this.remove} toggleFlag={this.state.toggleFlag}>{text}</Comment>
                )
            },

            render: function () {
                return (
                    <div>
                        <button className="button-info create" onClick={this.add}>Add New</button>
                        <button className="button-info" onClick={this.toggle}>Toggle Edit</button>
                        <div className="board">
                            {
                                this.state.comments.map(this.eachComment)
                            }
                        </div>
                    </div>
                )
            }
        });

        ReactDOM.render(
            <Board/>,
            document.getElementById('container'));
    </script>

</body>
</html>

buckyroberts ReactJS示例 - 奇怪的行为

0 个答案: