Javascript 我想在onClick-in-ReactJs中有两个方法，但它'；它不工作了

我试图在

onClick

中同时调用两个方法，它们是

startEdit（）

和

showmodel（）

中位于代码底部的

edit

按钮。我在谷歌上搜索过，我写下了他们让我做的事情，但它不起作用，它向我显示了一个错误！我是ReactJs新手，而且我正在尝试将ReactJs与Django一起使用

这是我的密码

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import { Modal } from "antd";

class ListItem extends React.Component {
  // For Item list from API
  constructor(props) {
    super(props);

    this.state = {
      todoList: [],
      activeItem: {
        id: null,
        title: "",
        completed: false,
      },
      editing: false,
    };
    this.fetchTasks = this.fetchTasks.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.getCookie = this.getCookie.bind(this);
  }

  // function for csrf token just like django documentation told
  getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== "") {
      const cookies = document.cookie.split(";");
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === name + "=") {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

  componentWillMount() {
    this.fetchTasks();
  }

  fetchTasks() {
    fetch("http://localhost:8000/api/task-list/")
      .then((response) => response.json())
      .then((data) =>
        this.setState({
          todoList: data,
        })
      );
  }

  handleChange(e) {
    let name = e.target.name;
    let value = e.target.value;
    console.log("Name:", name);
    console.log("Value:", value);

    this.setState({
      activeItem: {
        ...this.state.activeItem,
        title: value,
      },
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log("ITEM:", this.state.activeItem);
    // Apply the csrf token just like django documentation told
    let csrftoken = this.getCookie("csrftoken");
    let url = "http://localhost:8000/api/task-create/";
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": csrftoken,
      },
      body: JSON.stringify(this.state.activeItem),
    })
      .then((response) => {
        this.fetchTasks();
        this.setState({
          activeItem: {
            id: null,
            title: "",
            completed: false,
          },
        });
      })
      .catch(function (error) {
        console.log("Error:", error);
      });
  }

  startEdit(task) {
    this.setState({
      activeItem: task,
      editing: true,
    });
  }

  // For Modal
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    let tasks = this.state.todoList;
    let self = this;

    return (
      <div className="container col-md-6">
        <div className="container mt-5">
          <div className="form-group">
            <button
              onClick={this.showModal}
              id="btn-create-task"
              className="btn mt-4 col-md-12"
            >
              Create Task
            </button>
          </div>
          {/* For Modal */}

          <Modal
            title="Task"
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onOk={this.handleSubmit}
            centered
            footer={[
              <button
                key="Cancel"
                onClick={this.handleCancel}
                className="btn btn-outline-info"
              >
                Cancel
              </button>,
              <button
                id="submit"
                onClick={this.handleSubmit}
                key="Add"
                type="submit"
                className="btn btn-outline-primary"
              >
                Add
              </button>,
            ]}
          >
            <div className="form-group">
              <input
                onChange={this.handleChange}
                value={this.state.activeItem.title}
                className="form-control col-md-12"
                placeholder="Enter the task"
                type="text"
              />
            </div>
          </Modal>
        </div>
        <div id="task-container">
          <div id="list-wrapper">
            {tasks.map(function (task, index) {
              return (
                <div key={index} className="task-wrapper flex-wrapper">
                  <div id="item-list" className="float-left">
                    <span>{task.title}</span>
                  </div>
                  <div id="edit-delete-btn">
                    <button
                      onClick={() => {self.startEdit(task); this.showModal;}}
                      className="btn btn-outline-primary"
                    >
                      Edit
                    </button>
                    <button className="btn btn-outline-dark ml-2">Done</button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
export default ListItem;

从“React”导入React；
导入“bootstrap/dist/css/bootstrap.css”；
从“antd”导入{Modal}；
类ListItem扩展了React.Component{
//对于API中的项目列表
建造师（道具）{
超级（道具）；
此.state={
托多利斯特：[]，
活动项目：{
id:null，
标题：“，
已完成：错误，
},
编辑：错，
};
this.fetchTasks=this.fetchTasks.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.getCookie=this.getCookie.bind（this）；
}
//csrf令牌的函数，正如django文档所述
getCookie（名称）{
让cookieValue=null；
if（document.cookie&&document.cookie！==“”）{
const cookies=document.cookie.split（“；”）；
for（设i=0；iresponse.json（））
。然后（（数据）=>
这是我的国家({
托多利斯特：数据，
})
);
}
手变（e）{
让name=e.target.name；
设值=e.target.value；
console.log（“名称：”，名称）；
日志（“值：”，值）；
这是我的国家({
活动项目：{
…this.state.activeItem，
标题：价值，
},
});
}
handleSubmit（e）{
e、 预防默认值（）；
log（“项：”，this.state.activeItem）；
//按照django文档中的说明应用csrf令牌
让csrftoken=this.getCookie（“csrftoken”）；
让url=”http://localhost:8000/api/task-创建/“；
获取（url{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“X-CSRFToken”：CSRFToken，
},
body:JSON.stringify（this.state.activeItem），
})
。然后（（响应）=>{
this.fetchTasks（）；
这是我的国家({
活动项目：{
id:null，
标题：“，
已完成：错误，
},
});
})
.catch（函数（错误）{
日志（“错误：”，错误）；
});
}
启动IT（任务）{
这是我的国家({
活动项：任务，
编辑:对,，
});
}
//对于模态
状态={visible:false}；
showModal=（）=>{
这是我的国家({
可见：对，
});
};
handleCancel=（e）=>{
控制台日志（e）；
这是我的国家({
可见：假，
});
};
render（）{
让tasks=this.state.todoList；
让自我=这个；
返回(
创建任务
{/*表示模态*/}
{tasks.map（函数（任务，索引）{
返回(
{task.title}
{self.startEdit（任务）；this.showmodel；}}
className=“btn btn大纲主要”
>
编辑
多恩
);
})}
);
}
}
导出默认列表项；

这就是我犯的错误

第186:61行：应为赋值或函数调用，而不是看到表达式没有未使用的表达式

错误：

onClick={（）=>{self.startEdit（task）；this.showmodel；}

正确：

onClick={（）=>{self.startEdit（任务）；self.showmodel（）；}}