單擊按鈕時將組件返回到 id

Question

我想將組件<SaveTask/>返回到<div id="saveTask">的 div 標簽。 我嘗試使用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>
        )
    }
}

Answer 1

是的，所以 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 內，那么您只需移動里面的三元。

Answer 2

希望下面的回答對你有幫助

使用功能組件實現

import React, { useState } from "react";
import SaveTask from "./SaveTask";

function TaskHeader() {
  const [show, setShow] = useState(false);

  const showComp = () => {
    setShow(true);
  };

  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={showComp}
              >
                +
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="saveTask">{show && <SaveTask />}</div>
    </div>
  );
}

export default TaskHeader;

使用類組件實現

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>
              <div id="saveTask">`
               { this.state.saveTask && <SaveTask/> }
              </div>
            </div>
        )
    }
}