вот проблема
Кнопки которые указаны в биндере reducers
не работают в не одном написании текста
вот основной код бинда что в нем не так
помогите я уже 3 мучаюсь 
Кнопки которые указаны в биндере reducers
не работают в не одном написании текста
Код:
var initial = {
auto: true,
key: null,
update: null,
updateKey: null,
updateAuto: null,
voicechat: false,
binds: {
84:["Чат",true,false],
79:["Телефон",true,false],
90:["Главное меню",true,false],
71:["Голосовой чат",true,false],
88:["Курсор",true,false],
69:["Взаимодействие",true,false],
}
}
export default (state = initial, action) => {
if (action.type === 'BINDER_SET') {
let binds = {}
for (var key in action.binds) {
let item = action.binds[key]
if(item[0] === "Голосвой чат") item[0] = "Голосовой чат"
binds[key] = item;
}
return {
...state,
binds: binds,
}
} else if (action.type === 'BINDER_CREATE_BIND') {
let binds = state.binds;
binds[state.key] = [action.message, state.auto, true]
return {
...state,
binds: binds,
key: null
}
} else if (action.type === 'BINDER_UPDATE_BIND') {
let binds = state.binds;
let bind = binds[state.update]
delete binds[state.update]
binds[state.updateKey] = bind
if(bind[2]) binds[state.updateKey][0] = action.message
binds[state.updateKey][1] = state.updateAuto
return {
...state,
binds: binds,
update: null,
updateKey: null,
updateAuto: null,
}
} else if (action.type === 'BINDER_CREATE_AUTO') {
return {
...state,
auto: !state.auto,
}
} else if (action.type === 'BINDER_VOICE_CHAT') {
return {
...state,
voicechat: action.voicechat,
}
} else if (action.type === 'BINDER_UPDATE_AUTO') {
return {
...state,
updateAuto: !state.updateAuto,
}
} else if (action.type === 'BINDER_SELECT_UPDATE_KEY') {
return {
...state,
update: action.updateKey,
updateKey: action.updateKey,
updateAuto: state.binds[action.updateKey][1]
}
} else if (action.type === 'BINDER_DELETE_BIND') {
let binds = state.binds;
delete binds[action.deleteKey]
return {
...state,
binds: binds,
}
} else if (action.type === 'BINDER_CREATE_KEY') {
return {
...state,
key: action.key,
}
} else if (action.type === 'BINDER_UPDATE_KEY') {
return {
...state,
updateKey: action.updateKey,
}
} else if (action.type === 'BINDER_UPDATE_KEY1') {
let binds = state.binds;
binds[action.newKey] = binds[action.oldKey];
delete binds[action.oldKey]
return {
...state,
binds: binds,
}
}
return state;
Код:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import './css/binder.css';
//import mp from './mp';
import API from'./api.js';
window.setBinder = (binds) => {
API.store.dispatch({ type: 'BINDER_SET', binds: JSON.parse(unescape(binds))});
}
class Binder extends Component {
constructor(props) {
super(props)
this.handleKeyUp = this.handleKeyUp.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.charCode = this.charCode.bind(this)
this.saveBinder = this.saveBinder.bind(this)
}
componentDidMount() {
document.addEventListener("keyup", this.handleKeyUp);
document.addEventListener("keydown", this.handleKeyDown);
}
componentWillUnmount() {
document.removeEventListener("keyup", this.handleKeyUp)
document.removeEventListener("keydown", this.handleKeyDown)
}
handleKeyUp(event) {
if(event.target.id === "keyUp") {
event.preventDefault();
if(this.props.binder.binds[event.keyCode] !== undefined) window.setAlert("error", "Клавиша занята!");
this.props.createKey(event.keyCode);
} else if(event.target.id === "keyUpUpdate") {
event.preventDefault();
if(this.props.binder.binds[event.keyCode] !== undefined) window.setAlert("error", "Клавиша занята!");
this.props.updateKey(event.keyCode);
} else if(event.keyCode === 27 && this.props.gui.open === "binder") {
event.preventDefault();
this.saveBinder();
} else if(this.props.binder.binds[event.keyCode] !== undefined && !this.props.chat) {
event.preventDefault();
let [command, auto, lock] = this.props.binder.binds[event.keyCode];
if(!lock) {
if(command === "Телефон") {
if(this.props.gui.open === null) {
if(this.props.gui.phone === false) return window.setAlert("information", "У вас нет телефона");
window.setGui("phone");
} else if(this.props.gui.open === "phone" && this.props.phone === null) {
window.setGui(null)
}
} else if(command === "Взаимодействие") {
if(this.props.gui.open === null) {
if(this.props.circular_menu.entity_type === "player") {
window.setCircularSelectEntity(this.props.circular_menu.entity_id, this.props.circular_menu.entity_type);
} else if(this.props.circular_menu.entity_type === "vehicle") {
mp.trigger("vehicleLock", this.props.circular_menu.entity_id)
} else {
mp.trigger("cicularClick")
}
} else if(this.props.gui.open === "animations") window.setGui(null);
} else if(command === "Голосовой чат") {
if(this.props.binder.voicechat) {
this.props.voiceChat(false);
mp.trigger("voice_chat", false);
}
} else if(command === "Главное меню") {
if(this.props.gui.open === null) window.setGui("control");
} else if(command === "Чат") {
if(this.props.gui.open === null) window.chatAPI.activate(true);
}
} else if (this.props.gui.open === null) {
if(auto) window.chatAPI.send(command); else {
window.chatAPI.activate(true);
window.chatAPI.value(command)
}
}
}
}
handleKeyDown(event) {
if(this.props.binder.binds[event.keyCode] !== undefined && !this.props.chat) {
event.preventDefault();
let [command, auto, lock] = this.props.binder.binds[event.keyCode];
if(!lock) {
if(command === "Голосовой чат") {
if(this.props.gui.open === null && this.props.binder.voicechat === false) {
this.props.voiceChat(true);
mp.trigger("voice_chat", true);
}
}
}
}
}
saveBinder() {
mp.trigger("saveBinder", JSON.stringify(this.props.binder.binds))
window.setAlert("success" , "Биндер успешно сохранен и задействован!");
window.setGui(null)
}
createBind() {
if(this.props.binder.key === null) return window.setAlert("error", "Клавиша не указана!");
if(this.props.binder.binds[this.props.binder.key] !== undefined) return window.setAlert("error", "Клавиша занята!");
if(this.inputMessage.value === "") return window.setAlert("error", "Сообщение пустое!");
window.setAlert("success", "Новый бинд успешно создан!");
this.props.creacteBind(this.inputMessage.value);
this.inputMessage.value = "" ;
}
updateBind() {
if(this.props.binder.binds[this.props.binder.updateKey] !== undefined && this.props.binder.updateKey !== this.props.binder.update) return window.setAlert("error", "Клавиша занята!");
if(!this.props.binder.binds[this.props.binder.update][2]) {
this.props.updateBind(null);
} else {
if(this.inputMessageUpdate.value === "") return window.setAlert("error", "Сообщение пустое!");
this.props.updateBind(this.inputMessageUpdate.value);
}
window.setAlert("success", "Новый бинд успешно обновлен!");
}
render() {
return (
this.props.gui.open === "binder" ?
<div className="bandage">
<div className="bandage-header">
<div className="bandage-title">Биндер</div>
<div className="bandage-close" onClick={this.saveBinder}><i className="material-icons">clear</i></div>
</div>
<div className="bandage-box">
<div className="bandage-item">
<input id="keyUp" className="bandage-button" type="text" placeholder="Клавиша" value={this.charCode(this.props.binder.key)} readOnly/>
<div className="bandage-content">
<input id="messageBind" className="bandage-text" type="text" ref={(input) => { if(input) { this.inputMessage = input;} }} placeholder="Текст"/>
<div onClick={this.props.createAuto} className={this.props.binder.auto ? "bandage-checkbox active" : "bandage-checkbox noactive" }>
<span className="material-icons">{this.props.binder.auto ? "check_circle_outline" : "highlight_off" }</span>
</div>
</div>
<div className="bandage-edit" onClick={this.createBind.bind(this)}><i className="material-icons">edit</i></div>
</div>
{
Object.keys(this.props.binder.binds).map((key) => {
let [name, auto, block] = this.props.binder.binds[key]
return (
<div className="bandage-item" key={key}>
{
this.props.binder.update === key ? <input id="keyUpUpdate" className="bandage-button" value={this.charCode(this.props.binder.updateKey)} type="text" placeholder="Клавиша" readOnly/> : <div className="bandage-button">{this.charCode(key)}</div>
}
<div className="bandage-content">
{
this.props.binder.update === key && block ? <input id="messageBindUpdate" className="bandage-text" type="text" defaultValue={name} ref={(input) => { if(input) { this.inputMessageUpdate = input;} }} placeholder="Текст"/>: <div className="bandage-text">{name}</div>
}
{
this.props.binder.update === key && block ? <div onClick={this.props.updateAuto} className={this.props.binder.updateAuto ? "bandage-checkbox active" : "bandage-checkbox noactive" }><i className="material-icons">{this.props.binder.updateAuto ? "check_circle_outline" : "highlight_off" }</i></div> : <div className="bandage-checkbox"><i className="material-icons">{auto ? "check_circle_outline" : "highlight_off"}</i></div>
}
</div>
{
this.props.binder.update === key ? <div className="bandage-edit" onClick={this.updateBind.bind(this)}><i className="material-icons">edit</i></div>
: block ? <div style={{display: "contents"}}>
<div className="bandage-turn" onClick={() => {this.props.selectUpdateBind(key)}}><i className="material-icons">settings</i></div>
<div className="bandage-delete" onClick={() => {this.props.deleteBind(key)}}><i className="material-icons">delete</i></div>
</div> : <div className="bandage-turn" onClick={() => {this.props.selectUpdateBind(key)}} ><i className="material-icons">settings</i></div>
}
</div>
)
})
}
</div>
</div>
: <div></div>
)
}
charCode(code) {
switch (code) {
case null: return "";
case 179: return "MediaPlayPause";
case 178: return "MediaStop";
case 177: return "MediaTrackPrevious";
case 176: return "MediaTrackNext";
case 169: return "BrowserStop";
case 172: return "BrowserHome";
case 180: return "LaunchMail";
case 171: return "BrowserFavorites";
case 27: return "Escape";
case 112: return "F1";
case 113: return "F2";
case 114: return "F3";
case 115: return "F4";
case 116: return "F5";
case 117: return "F6";
case 118: return "F7";
case 119: return "F8";
case 120: return "F9";
case 121: return "F10";
case 122: return "F11";
case 123: return "F12";
case 145: return "ScrollLock";
case 192: return "`";
case 49: return "1";
case 50: return "2";
case 51: return "3";
case 52: return "4";
case 53: return "5";
case 54: return "6";
case 55: return "7";
case 56: return "8";
case 57: return "9";
case 48: return "0";
case 189: return "-";
case 187: return "=";
case 8: return "Backspace";
case 45: return "Insert";
case 36: return "Home";
case 33: return "PageUp";
case 144: return "NumLock";
case 111: return "Num/";
case 106: return "Num*";
case 109: return "Num-";
case 9: return "Tab";
case 81: return "q";
case 87: return "w";
case 69: return "e";
case 82: return "r";
case 84: return "t";
case 89: return "y";
case 85: return "u";
case 73: return "i";
case 79: return "o";
case 80: return "p";
case 219: return "[";
case 221: return "]";
case 13: return "Enter";
case 46: return "Delete";
case 35: return "End";
case 34: return "PageDown";
case 103: return "Num7";
case 104: return "Num8";
case 105: return "Num9";
case 107: return "Num+";
case 20: return "CapsLock";
case 65: return "a";
case 83: return "s";
case 68: return "d";
case 70: return "f";
case 71: return "g";
case 72: return "h";
case 74: return "j";
case 75: return "k";
case 76: return "l";
case 186: return ";";
case 222: return "'";
case 38: return "ArrowUp";
case 100: return "Num4";
case 101: return "Num5";
case 102: return "Num6";
case 16: return "Shift";
case 90: return "z";
case 88: return "x";
case 67: return "c";
case 86: return "v";
case 66: return "b";
case 78: return "n";
case 77: return "m";
case 188: return ",";
case 190: return ".";
case 191: return "/";
case 220: return "\\";
case 37: return "ArrowLeft";
case 40: return "ArrowDown";
case 39: return "ArrowRight";
case 97: return "Num1";
case 98: return "Num2";
case 99: return "Num3";
case 17: return "Control";
case 91: return "Meta";
case 18: return "Alt";
case 32: return "Space";
case 92: return "Meta";
case 93: return "ContextMenu";
case 96: return "Num0";
case 110: return "Num.";
case 166: return "BrowserBack";
case 167: return "BrowserForward";
case 175: return "AudioVolumeUp";
case 174: return "AudioVolumeDown";
case 173: return "AudioVolumeMute";
case 182: return "LaunchMyComputer";
case 183: return "LaunchCalculator";
default: return String.fromCharCode(code);
}
}
}
export default connect(
state => ({
binder: state.binder,
chat: state.main.active,
circular_menu: state.circular_menu,
gui: state.gui,
phone: state.phone.openApp
}),
dispatch => ({
creacteBind: (message) => {
dispatch({ type: 'BINDER_CREATE_BIND', message});
},
createAuto: () => {
dispatch({ type: 'BINDER_CREATE_AUTO'});
},
voiceChat: (voicechat) => {
dispatch({ type: 'BINDER_VOICE_CHAT', voicechat});
},
createKey: (key) => {
dispatch({ type: 'BINDER_CREATE_KEY', key});
},
deleteBind: (deleteKey) => {
dispatch({ type: 'BINDER_DELETE_BIND', deleteKey });
},
selectUpdateBind: (updateKey) => {
dispatch({ type: 'BINDER_SELECT_UPDATE_KEY', updateKey });
},
updateKey: (updateKey) => {
dispatch({ type: 'BINDER_UPDATE_KEY', updateKey });
},
updateAuto: () => {
dispatch({ type: 'BINDER_UPDATE_AUTO'});
},
updateBind: (message) => {
dispatch({ type: 'BINDER_UPDATE_BIND', message });
},
addMessage: (message) => {
dispatch({ type: 'CHAT_MESSAGES', message });
},
clearChat: () => {
dispatch({ type: 'CHAT_MESSAGES_CLEAR'});
},
showChat: (toggle) => {
dispatch({ type: 'CHAT_SHOW', toggle });
},
addHistoryMessage: (history) => {
dispatch({ type: 'CHAT_HISTORY_MESSAGES', history });
},
updatePosition: (position) => {
dispatch({ type: 'CHAT_HISTORY_POSITION', position});
}
})
)(Binder);