时间戳

首页 > 解决方案 > 单击按钮时将组件返回到 id

javascript - 单击按钮时将组件返回到 id

问题描述

我想将一个组件返回<SaveTask/>到一个 div 标签，其中<div id="saveTask">. 我尝试使用this.setState()，但它会更改容器并显示<SaveTask/>组件。我想保留该容器并在该容器下，我想在单击按钮后附加一个组件。有没有办法使用document.getElementById('saveTask').

import React, { Component } from 'react'
import SaveTask from './SaveTask';


export default class TaskHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            saveTask: false,
        }

        this.showComp = () => {
            this.setState({
                saveTask: true,
            })
        }
    }

    render() {
        if(this.state.saveTask) {
            return (
                
                document.getElementById('saveTask').innerHTML = <SaveTask/>
                
            )
        }

        return (
            <div>
            <div className="container-fluid bg-white border-bottom">
                <div className="row">
                    <div className="col-12">
                        <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
                        <div className="tasks-lower">
                            <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="saveTask">
                Return a component to this section when clicking the button
            </div>
            </div>
        )
    }
}

检查此图像

标签： javascriptreactjs

解决方案

是的，所以 react 的美妙之处在于您不需要也不应该更新 innerhtml 来更新组件。您可以简单地使用三元组来确定稍后要显示的组件：

import React, { Component } from 'react'
import SaveTask from './SaveTask';


export default class TaskHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            saveTask: false,
        }

        this.showComp = () => {
            this.setState({
                saveTask: true,
            })
        }
    }

    render() {
        return (
            <div>
            <div className="container-fluid bg-white border-bottom">
                <div className="row">
                    <div className="col-12">
                        <div className="tasks-upper text-muted">TASK MANAGEMENT APP</div>
                        <div className="tasks-lower">
                            <span className="text-secondary text-size">TASK</span><button className="text-primary btn-size" type="button" onClick={this.showComp}>+</button>
                        </div>
                    </div>
                </div>
            </div>
            {this.state.saveTask ? (
              <SaveTask/>
            ) : (
              <div id="saveTask">
                Return a component to this section when clicking the button
              </div>
            )}
            </div>
        )
    }
}

在这种情况下，您会说，“如果 this.state.saveTask 为真，则显示<SaveTask />其他内容，显示<div id="saveTask">元素。如果您想要在该 div 中，那么您只需将三元组移动到其中。

推荐阅读