javascript - 在react js中添加子函数

Question

我的任务是在单击后将 h1 添加到带有输入和按钮的 div 中。我不知道是否可以在函数内添加子项，如果不是，我还能怎么做

import React from "react";

class ToDo extends React.Component {
  addTask() {
    var inputText = document.getElementById("input").value;
  }
  render() {
    return (
      <div>
        <input id="input" type="text" ref={input => (this.textInput = input)} />
        <button onClick={this.addTask}>Add</button>
      </div>
    );
  }
}

export default ToDo;

Answer 1

class ToDo extends React.Component {
  state = {expanded: false};

  render() {
    const {expanded} = this.state;

    if(expanded) {
      return (
        <div>
          <h1>
            <input .../>
          </h1>
          <button onClick={() => this.setState({expanded: false})>cancel</button>
        </div>
      );
    } else {
        return <div onClick={() => this.setState({expanded: true})>add task</div>
    }
  }
}

我留下了内部“原理图”，您需要添加元素和处理程序，只是想演示原理