[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
reactjs - React onDrop is not firing - Stack Overflow の翻訳。恥ずかしながら同じ問題にひっかかった。
下記の React と TypeScript で書いたコードを試しているのですが、onDragEnter と onDragOver は動くのに onDrop だけ動きません。
import * as React from 'react';
export class FileZone extends React.Component {
onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
}
onDragEnter = (e) => {
let event = e as Event;
event.stopPropagation();
}
onFileDrop = (e) => {
let event = e as Event;
event.stopPropagation();
console.log("onFileDrop");
alert("dropped")
}
render() {
return (
<div
onDragEnter={this.onDragEnter}
onDragOver={this.onDragOver}
onDrop={this.onFileDrop}>
Drag and drop file here
</div>)
}
}
自力で解決しました。諸々の理由で onDragOver を次のように書き直す必要が有りました。
onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
event.preventDefault();
}
質問日時 2018年05月08日 12:37
返答者 Prasob
同じ問題にあたりましたが、同じ方法で直りました。ただ、これって React のバグじゃないですか？ Native の JavaScript だとそのような問題は起こりません
質問日時 2018年05月20日 10:49
返答者 Ematipico
所用で必要だったのでメモメモ。
const MYSQL = require('mysql'); // 事前に npm install しておく
const TUNNEL = require('tunnel-ssh'); // 事前に npm install しておく
const FS = require('fs');
// 経由するサーバに SSH するための情報。無論適宜変える事
const sshParam = {
username: 'hiyoko',
host: '192.168.22.17',
port: 22,
privateKey: FS.readFileSync('hiyoko-server.pem'),
dstPort: 3306,
localhost: 'localhost',
localPort: 3306
};
// mysql サーバに接続するための情報。無論適宜変える事
const mysqlParam = {
host: 'mysql.hiyoko.example.com',
user: 'mysql-user',
password: 'myStrongestPassword',
database: 'hiyoko' // 特定の DB に入りたいわけでないのであれば書かない
};
const connectToDb = (connection) => {
return new Promise((resolve, reject)=> {
connection.connect((dbConnectErr)=>{
if(dbConnectErr) {
console.error('DB への接続に失敗したよ');
reject(dbConnectErr);
} else {
console.log(`DB に接続できたよ スレッド ID は ${connection.threadId}`);
resolve(connection);
}
});
});
};
const disconnectFromDb = (connection) => {
return new Promise((resolve, reject)=> {
connection.end((dbDisconnectErr)=> {
if(dbDisconnectErr) {
console.error('DB との切断に失敗したよ');
reject(dbDisconnectErr);
} else {
console.log('DB と切断したよ');
resolve(connection);
}
});
});
};
const requestQuery = (connection, sql) => {
return new Promise((resolve, reject)=> {
connection.query(sql, (requestErr, results, fields)=> {
if(requestErr) {
console.error(`DB へのリクエスト ${sql} が失敗したよ`);
reject(requestErr);
} else {
resolve({
results: results,
fields: fields
});
}
});
});
};
const sshTunnel = TUNNEL(sshParam, async (sshErr, tunnel)=> {
if(sshErr) {
throw sshErr;
}
const connection = MYSQL.createConnection(mysqlParam);
await connectToDb(connection);
/* 以下で DB の処理とかをがちゃがちゃ */
const queryResult = await requestQuery(connection, 'select * from aTable;');
console.log(queryResult);
/* 終わったら切断する */
await disconnectFromDb(connection);
sshTunnel.close();
});
ココフォリアから取得した html ログを編集するエディタを Udonarium に対応させた。
Udonarium のログを取得し、変換するコードはこちらの通り。zip 形式で保存された部屋から chat.xml を取得し、xml をパースしている。
タイトルまんま。テキストセッションで使ったりするといいかもしれない。https://shunshun94.github.io/shared/other/io/github/shunshun94/trpg/map/index
mouseenter イベントの挙動がちょっとひよこには難しかった。
罫線で出せたら便利かなぁとも思ったけど表示するだけであれば今の形式で良くね？と思いやらなかった。
https://shunshun94.github.io/shared/jquery/io/github/shunshun94/trpg/logEditor/LogToCSS.html にエディタの出力を入れると CSS のテンプレートを生成するようにした。エディタ側で発言者毎に html の class を付与できるようにしているので、それと組み合わせるとキャンペーンのログにも楽に統一された見た目を適用できる。
質問日時 2018年05月08日 09:13
質問者 Prasob