创建一个在React.js中单击按钮时打开文本区域的事件

Question

我的任务是创建一个任务系统，每个用户都有自己的任务。无论如何，我需要创建一个按钮，当用户单击该按钮时它将使任务可编辑。我已经附加了我的主要App组件和具有按钮的组件的代码。我希望你们能帮助我，因为我不知道我应该怎么做才能工作。先谢谢了！

这里有我的App.js组件：

import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header";
import Tasks from "./components/Tasks";
import { tasks } from './db';

export default class App extends Component {
  state = {
    tasks: [],
    authenticatedUser: null
  };


  delTask = id => {
    this.setState(prevState => ({
      tasks: [...prevState.tasks.filter(task => task.id !== id)]
    }));
  };

  loginUser = (id) => {
    this.setState({ tasks: tasks[id] });
  }

  addTask = () => {
    this.setState(prevState => {
      const newId = prevState.tasks.length + 1;
      return { tasks: [...prevState.tasks, { id: newId, title: 'משימה חדשה' }] }
    });
  }



  render() {
    return (
      <div className="App">
        <Header loginUser={this.loginUser} />
        <Tasks 
          tasks={this.state.tasks} 
          delTask={this.delTask} 
          addTask={this.addTask}
        />
      </div>
    );
  }
}

这是我带有按钮的组件：

    import React, { Component } from "react";

export class TaskItem extends Component {
  getStyle = () => {
    return {
      background: "#f4f4f4",
      padding: "10px",
      borderBottom: "1px #ccc solid",
      direction: "rtl",
      textAlign: "center"
    };
  };

  render() {
    const { id } = this.props.task;

    return (
      <div style={this.getStyle()}>
        <p>
          {this.props.task.title}
          <button onClick= style={plusBtnStyle}>+</button>
          <button onClick={() => this.props.delTask(id)} style={xBtnStyle}>
            x
          </button>
        </p>
      </div>
    );
  }
}



const plusBtnStyle = {
  background: "green",
  color: "white",
  border: "none",
  borderRadius: "25%",
  padding: "5px 10px",
  cursor: "pointer",
  float: "right"
};

const xBtnStyle = {
  background: "red",
  color: "white",
  border: "none",
  borderRadius: "25%",
  padding: "5px 10px",
  cursor: "pointer",
  float: "left"
};


export default TaskItem;

这是按钮本身：

<button onClick= style={plusBtnStyle}>+</button>

感谢您的协助，谢谢！