reactjs - 如何在 react 中动态显示/隐藏项目列表

Question

我无法在 react 中显示/隐藏某些元素。基本上，我有一个 li 的动态列表，在 li 中，我有一个标签，当您单击 li 时，我想隐藏标签并显示输入。通常使用 jQuery 就很简单

$('#element').hide()
$('#element2').show()

我不太明白如何用我当前的布局实现这一点

class EntriesTable extends React.Component {
    constructor(props) {
        super(props);

        console.log(this.props.plannerId);
        this.state = { 
            tasks: [],
            plannerId: this.props.plannerId,
        };

        var state = this.state;
    }

    componentDidMount() {
        this.getTasks(this.state.plannerId);
    }

    EditTask(id) {
        console.log(id);
        var spanEl = id + 'taskSpan';
        var inputEl = id + 'taskInput';
        //hide this span
        //show input
        $(spanEl).hide();
        $(inputEl).show();

        //when save

        //hide input
        //update task
        //show span
    }

    updateTask(id, name) {
        $.ajax({
            type: "GET",
            url: "/Task/Update",
            data: { id: id, name: name },
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                //this.setState({ tasks: data.ReturnObject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    createTask(name) {
        //make api call to create planner here.

        var data = {
            Name: name,
            PlannerId: model.plannerId,
            Status: "Not Complete",
            Description: "",
            Affiliation: "",
            Footprint: "",
            Created: new Date(),
            Modified: null,
        };

        $.ajax({
            type: "POST",
            url: "/Task/Add",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.getTasks(model.plannerId);
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    getTasks(id) {
        this.setState({ tasks: [], loading: true });
        $.ajax({
            type: "GET",
            url: "/Task/GetAll",
            data: { id: id },
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.setState({ tasks: data.ReturnObject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    render() {
        const tasks = this.state.tasks.map((task) => {
            var spanId = task.Id + "taskSpan";
            var inputId = task.Id + "taskInput"; 
            return (
               <li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}>
                   <div className="pull-left" style={{width: '50%'}}>
                       <span id={spanId} onClick={this.EditTask.bind(this, task.Id) }>{task.Name}</span>
                       <input id={inputId} type="text" style={{ display: 'none' } } />
                   </div>
                   <div className="pull-right" style={{marginTop: '-5px', width: '50%'}}>
                       <div className="pull-right">
                            <button className="btn btn-default">Add</button>
                            <button className="btn btn-default">Edit</button>
                        </div>
                   </div>
               </li>
            );
        });
        return (
          <div className="table-wrapper">
            <div className="task-container">
                <h3>{this.props.rowName}</h3>
            </div>
            <ul id="tasksContainer">
                {tasks}
                <li className="list-group-item list-group-item-last"><input type="button" value="Add Task" onClick={this.addTask.bind(this)} className="btn btn-success btn-override" /></li>
            </ul>
          </div>

      );
    }
};

我确实看到其他SO告诉你使用变量，然后通过更改变量来显示/隐藏，但我不确定这是否适合我的需要，因为我有一个动态列表，它不仅仅是一个我试图显示或隐藏的元素。

Answer 1

class EntriesTable extends React.Component {
    constructor(props) {
        super(props);

        console.log(this.props.plannerId);
        this.state = { 
            editableTasks: [],
            tasks: [],
            plannerId: this.props.plannerId,
        };

        var state = this.state;
        /* This isn't completely necessary but usually it is recommended you 
         * bind the class method in the constructor so it isn't bound on each
         * render
         */
        this.EditTask = this.EditTask.bind(this);
    }

    componentDidMount() {
        this.getTasks(this.state.plannerId);
    }

    EditTask(id) {
        /* So jQuery and react are kind of at odds with each other on fundamentals
         * React is supposed to be declarative whereas jQuery is imperative. Using 
         * jQuery and React together is typically discouraged unless there is a real
         * need for it. In React you are supposed to define how you want the UI to render
         * based on some variables. You have two options available to you props and state.
         * props are passed from the parent and are immutable. state is managed within that
         * component and is mutable. So we have added a variable called editableTasks to your
         * state that will contain an array of all editable tasks. Instead of trying to hide 
         * or show items here, we are simply going to add the id of now editable task to that
         * array
         * 
         */
        var nextState = this.state;
        nextState.editableTasks.push(id);
        this.setState(nextState);
    }

    updateTask(id, name) {
        $.ajax({
            type: "GET",
            url: "/Task/Update",
            data: { id: id, name: name },
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                //this.setState({ tasks: data.ReturnObject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    createTask(name) {
        //make api call to create planner here.

        var data = {
            Name: name,
            PlannerId: model.plannerId,
            Status: "Not Complete",
            Description: "",
            Affiliation: "",
            Footprint: "",
            Created: new Date(),
            Modified: null,
        };

        $.ajax({
            type: "POST",
            url: "/Task/Add",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.getTasks(model.plannerId);
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    getTasks(id) {
        this.setState({ tasks: [], loading: true });
        $.ajax({
            type: "GET",
            url: "/Task/GetAll",
            data: { id: id },
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
                this.setState({ tasks: data.ReturnObject, loading: false });
            }.bind(this),
            error: function (xhr, status, err) {
                console.log(err);
            }
        });
    }

    render() {
        const tasks = this.state.tasks.map((task) => {
            var editable = this.state.editableTasks.filter(id => id === task.Id).length > 0;
            /* Now here we are going to check whether this item is editable
             * based on id. So we assign a variable that will eval to a bool
             * based on whether when you filter editableTasks to see if it contains
             * the current items id the length is greater than 0. 
             *
             * Now below instead of applying some id attribute we are going to return either
             * the input or the span based on whether it is editable using a ternary operation
             *
             */
            return (
               <li key={task.Id} className="list-group-item" style={{minHeight: '50px'}}>
                   <div className="pull-left" style={{width: '50%'}}>
                       {editable ? <input type="text" /> : <span onClick={this.EditTask( task.Id)}>{task.Name}</span>}
                       
                   </div>
                   <div className="pull-right" style={{marginTop: '-5px', width: '50%'}}>
                       <div className="pull-right">
                            <button className="btn btn-default">Add</button>
                            <button className="btn btn-default">Edit</button>
                        </div>
                   </div>
               </li>
            );
        });
        return (
          <div className="table-wrapper">
            <div className="task-container">
                <h3>{this.props.rowName}</h3>
            </div>
            <ul id="tasksContainer">
                {tasks}
                <li className="list-group-item list-group-item-last"><input type="button" value="Add Task" onClick={this.addTask.bind(this)} className="btn btn-success btn-override" /></li>
            </ul>
          </div>

      );
    }
};

所以上面的内容应该可以使项目可编辑。现在它不处理实际编辑它们或将它们返回到不可编辑状态。但这应该说明您应该如何通过“ react 方式”来完成此任务。

我鼓励你放弃 jQuery。 jQuery 将使你的 React 代码更难管理，也更难接受 React 方式。如果您需要用于 ajax 请求的东西，有很多较小的库也很适合(强烈推荐 superagent，但快速谷歌可以引导您找到许多其他库)

如果您有任何其他问题，请告诉我。