Не удается заставить диспетчер задач JavaScript работать с кодом React JS - PullRequest
Новая
       9

Не удается заставить диспетчер задач JavaScript работать с кодом React JS

0 голосов
/ 18 сентября 2018

Я работаю над проектом блокчейна, который интегрирует много React JS для функциональности пользовательского интерфейса.Я хочу включить программу диспетчера задач JavaScript (эта программа работает) в приведенную ниже программу React JS, и я совершенно не понимаю, куда включать методы диспетчера задач.Пока что я могу просто заставить кнопки и текстовые поля отображаться в браузере, но без функциональности (например, добавить, изменить и т. Д.).На функции рендеринга в конце программы React JS я сосредоточил свое внимание, но, возможно, это неправильно.

В любом случае, и код менеджера задач, и программа React JS перечислены ниже.Я знаю, что это много кода, но если бы кто-то мог просто сказать мне, где разместить методы JS в программе блокчейна React JS, это было бы очень полезно.

Это приложение диспетчера задач, которое я пытаюсь интегрировать в программу React JS ниже.

ПРОГРАММА TASK MANAGER

index.html 

<html>
  <head>
    <title>Todo App</title>
    <!-- <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> -->
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">    
  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>

      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Study</label><input type="text" value="Study"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>

    <script type="text/javascript" src="app.js"></script>

  </body>
</html>

taskManager.js 

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks

//New task list item
var createNewTaskElement=function(taskString){

    var listItem=document.createElement("li");

    //input (checkbox)
    var checkBox=document.createElement("input");//checkbx
    //label
    var label=document.createElement("label");//label
    //input (text)
    var editInput=document.createElement("input");//text
    //button.edit
    var editButton=document.createElement("button");//edit button

    //button.delete
    var deleteButton=document.createElement("button");//delete button

    label.innerText=taskString;

    //Each elements, needs appending
    checkBox.type="checkbox";
    editInput.type="text";

    editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
    editButton.className="edit";
    deleteButton.innerText="Delete";
    deleteButton.className="delete";

    //and appending.
    listItem.appendChild(checkBox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
    return listItem;
}

var addTask=function(){
    console.log("Add Task...");
    //Create a new list item with the text from the #new-task:
    var listItem=createNewTaskElement(taskInput.value);

    //Append listItem to incompleteTaskHolder
    incompleteTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);

    taskInput.value="";
}

//Edit an existing task.
var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");

var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");
        //If class of the parent is .editmode
        if(containsClass){

        //switch to .editmode
        //label becomes the inputs value.
            label.innerText=editInput.value;
        }else{
            editInput.value=label.innerText;
        }

        //toggle .editmode on the parent.
        listItem.classList.toggle("editMode");
}

//Delete task.
var deleteTask=function(){
        console.log("Delete Task...");

        var listItem=this.parentNode;
        var ul=listItem.parentNode;
        //Remove the parent list item from the ul.
        ul.removeChild(listItem);

}

//Mark task completed
var taskCompleted=function(){
        console.log("Complete Task...");

    //Append the task list item to the #completed-tasks
    var listItem=this.parentNode;
    completedTasksHolder.appendChild(listItem);
                bindTaskEvents(listItem, taskIncomplete);

}

var taskIncomplete=function(){
        console.log("Incomplete Task...");
//Mark task as incomplete.
    //When the checkbox is unchecked
        //Append the task list item to the #incomplete-tasks.
        var listItem=this.parentNode;
    incompleteTaskHolder.appendChild(listItem);
            bindTaskEvents(listItem,taskCompleted);
}

var ajaxRequest=function(){
    console.log("AJAX Request");
}

//Set the click handler to the addTask function.
addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);

var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
    console.log("bind list item events");
//select ListItems children
    var checkBox=taskListItem.querySelector("input[type=checkbox]");
    var editButton=taskListItem.querySelector("button.edit");
    var deleteButton=taskListItem.querySelector("button.delete");

            //Bind editTask to edit button.
            editButton.onclick=editTask;
            //Bind deleteTask to delete button.
            deleteButton.onclick=deleteTask;
            //Bind taskCompleted to checkBoxEventHandler.
            checkBox.onchange=checkBoxEventHandler;
}

//cycle over incompleteTaskHolder ul list items
    //for each list item
    for (var i=0; i<incompleteTaskHolder.children.length;i++){

        //bind events to list items chldren(tasksCompleted)
        bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
    }

//cycle over completedTasksHolder ul list items
    for (var i=0; i<completedTasksHolder.children.length;i++){
    //bind events to list items chldren(tasksIncompleted)
        bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
    }

ПРОГРАММА REACT JS

И вот программа React JS, в которую я пытаюсь интегрировать вышеуказанную программу. 

import React, { Component } from 'react'
import SimpleStorageContract from '../build/contracts/SimpleStorage.json'
import getWeb3 from './utils/getWeb3'
import ipfs from './ipfs'

import './css/oswald.css'
import './css/open-sans.css'
import './css/pure-min.css'
import './App.css'

class App extends Component 
{
  constructor(props) 
  {
    super(props)

    this.state = {
      ipfsHash: '',
      web3: null,
      buffer: null,
      account: null
    }
    this.captureFile = this.captureFile.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
}

  componentWillMount() 
  {
    // Get network provider and web3 instance.
    // See utils/getWeb3 for more info.
//utilitty came for free with trufflebox
/*
read/write data to blockchain directly
*/
    getWeb3
    .then(results => {
      this.setState({
        web3: results.web3
      })

      // Instantiate contract once web3 provided.
      this.instantiateContract()
    })
    .catch(() => {
      console.log('Error finding web3.')
    })
  }

  instantiateContract() 
  {
    const contract = require('truffle-contract')
    const simpleStorage = contract(SimpleStorageContract)
    simpleStorage.setProvider(this.state.web3.currentProvider)

    // Get accounts.
    this.state.web3.eth.getAccounts((error, accounts) => {
      simpleStorage.deployed().then((instance) => {
        this.simpleStorageInstance = instance
        this.setState({ account: accounts[0] })
        // Get the value from the contract to prove it worked.
        return this.simpleStorageInstance.get.call(accounts[0])
      }).then((ipfsHash) => {
        // Update state with the result.
        return this.setState({ ipfsHash })
      })
    })
  }

  captureFile(event) 
  {
    event.preventDefault()
    const file = event.target.files[0]
    const reader = new window.FileReader()
    reader.readAsArrayBuffer(file)
    reader.onloadend = () => {
      this.setState({ buffer: Buffer(reader.result) })
      console.log('buffer', this.state.buffer)
    }
  }

  onSubmit(event) {
    event.preventDefault()
    ipfs.files.add(this.state.buffer, (error, result) => {
      if(error) {
        console.error(error)
        return
      }

      this.simpleStorageInstance.set(result[0].hash, { from: this.state.account }).then((r) => {
        return this.setState({ ipfsHash: result[0].hash })
        console.log('ipfsHash', this.state.ipfsHash)
        })
/*
      this.simpleStorageInstance.set(result[0].hash, { from: this.state.account }).then((r) => {
      return this.setState({ ipfsHash: result[0].hash })
      console.log(this.state.ipfsHash)
      */

    })
  }  
    /*
      this.simpleStorageInstance.set(result[0].hash, { from: this.state.account }).then((r) => {
        return this.setState({ ipfsHash: result[0].hash })
        console.log('ipfsHash', this.state.ipfsHash)
        })
        */

  //page template
  render() 
  {
    return (

      <div className="App">

          <nav className="navbar pure-menu pure-menu-horizontal">
            <img src="/vandelay_industries.jpeg" alt="img" width="128" height="120" ></img>

            <a href="#" className="pure-menu-heading pure-menu-link">File Upload DApp Using IPFS</a>
            </nav>

            <main className="container">
               <div className="pure-g">
                <div className="pure-u-1-1">
                  <div className="taskContainer">
                      <p>
                         <label for="new-task"></label><input id="new-task" type="text" /><button>Add</button>
                     </p>

                     <h3>Tasks</h3>
                         <ul id="incomplete-tasks">
                            <li><input type="checkbox" /><label></label><input type="text" /><button class="edit">Edit</button><button class="delete">Delete</button></li>
                            <li class="editMode"><input type="checkbox" /><label></label><input type="text" /><button class="edit">Edit</button><button class="delete">Delete</button></li>
                         </ul>


                    <h3>Completed</h3>
                        <ul id="completed-tasks">
                          <li><input type="checkbox" checked /><label></label><input type="text" /><button class="edit">Edit</button><button class="delete">Delete</button></li>
                         </ul>

                  </div>

                <script type="text/javascript" src="taskScriptUtil.js"></script>

              <h1>Image</h1>

                <p>The uploaded image will be stored on IPFS and the Ethereum Blockchain</p>
                  <img src={`https://ipfs.io/ipfs/${this.state.ipfsHash}`} alt=""/>
                <h2>Upload Image</h2>
                  <form onSubmit={this.onSubmit} >
                    <input type='file' onChange={this.captureFile} />
                      <input type='submit' />

                  </form>
            </div>
          </div>
         </main>
        </div>
      );
    }
  }

  export default App

Вотindex.html для программы React JS выше. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>Truffle Box</title>

  </head>
  <body>
    <div id="root"></div> 
  </body>
</html>
...