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>
    }
  }
}

我离开了内部的“示意图”，您需要添加元素和处理程序，只想演示主体

在React JS中添加子函数

1 个答案: