相关疑难解决方法(0)

我想在React中的div上使用keyDown事件.我做:

  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      

  onKeyPressed(e) {
    console.log(e.keyCode);
  }

  render() {
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
    return (
      <div 
        className="player"
        style={{ position: "absolute" }}
        onKeyDown={this.onKeyPressed} // not working
      >
        <div className="light-circle">
          <div className="image-wrapper">
            <img src={IMG_URL+player.img} />
          </div>
        </div>
      </div>
    )
  }

它工作正常,但我想在React风格中做得更多.我试过了

        onKeyDown={this.onKeyPressed}

在组件上.但它没有反应.我记得它适用于输入元素.

Codepen:http://codepen.io/lafisrap/pen/OmyBYG

我该怎么做？

我想textfield在用户按键盘输入键时传递值.在onChange()事件中,我得到的值textbox,但如何在enter按下键时获得此值？

码:

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}

我是React.js的新手.我正在尝试触发文本div的按键事件.

这里是我要执行按键触发器的文本框代码.

<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div>

和按键方法是

onKeyPress: function(e) {
   return "Enter" == e.key ? "Enter key event triggered" : void 0)
}

我用jquery尝试了但是我无法触发它.

这是我尝试过的React代码,但它不起作用.

var event = new Event('keypress', {
 'keyCode' : 13,
 'which' : 13,
 'key' : 'Enter'
});
var node = document.getElementById('test23');
node.dispatchEvent(event);

谢谢 :)

试图在react.js中实现键绑定.做了一些研究,但仍然想知道什么是最干净的方法.例如,

if (event.keyCode == 13 /*enter*/) {
  function()
}
if (event.keyCode == 27 /*esc*/) {
  anotherfunction()
}

我正在使用React js.我需要检测page refresh.当用户点击刷新图标或按F5时,我需要找出该事件.

我尝试使用javascript函数进行stackoverflow发布

我用javascript函数beforeunload仍然没有运气.

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

在这里我有关于stackblitz的完整代码

我试图阻止一些角色被输入,但由于某种原因,禁令不会发生.我哪里错了？

render () {
    return <form>
        <input
            id="username"
            type="text"
            placeholder="Username"
            value={this.state.value}
            onKeyPress={this.pale_username.bind(this)}
        />
    </form>
}

和功能

pale_username(key) {
    if((key.charCode < 48 || key.charCode > 57) //numbers
        && (key.charCode < 65 || key.charCode > 90) // AB
        && (key.charCode < 97 || key.charCode > 122) // ab
        && (key.charCode !== 36) // $
        && (key.charCode !== 38) // &
        && (key.charCode < 40 || key.charCode > 41) // ()
        && (key.charCode < 45 || key.charCode > 46) // -.
        && (key.charCode …

这是我的 react js 应用程序中的一个片段：

<form className="rcw-sender" onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''} onSubmit={sendMessage}>
  {this.state.active && <Container>
    <EmojiPicker />
  </Container>}
  <button className="rcw-send" onClick={activateEmoji}>
    <img src={emojibutton} className="rcw-send-icon" alt="send" />
  </button>
  <button className="rcw-send" onClick={activateMenu}>
    <img src={menubutton} className="rcw-send-icon" alt="send" />
  </button>

  <input type="text" className="rcw-new-message" name="message" placeholder={placeholder} disabled={disabledInput}
    autoFocus={autofocus} autoComplete="off" ref={this.input} />
  <button type="submit" className="rcw-send">
    <img src={send} className="rcw-send-icon" alt="send" />
  </button>
</form>

onSubmit={sendMessage}当我按下提交按钮时，在我的表单中被调用，这非常有效。但是我希望在sendMessage按回车键提交表单时调用相同的方法。要做到这一点，我有这个代码onKeyDown={(e)=> e.keyCode == 13 ? {sendMessage}: ''}，我希望sendMessage在按下回车键时调用该方法，但它似乎不起作用。我想这样做是因为我的应用程序中有一个表情符号选择器，当我使用回车键提交表单时，表情符号选择器就会出现。所以为了解决这个问题，我想sendMessage在按下回车键提交表单时调用该方法。使用提交按钮提交表单不会切换表情符号选择器的状态。这就是为什么作为快速解决问题的sendMessage方法，我想在按下 Enter 键时调用方法。我该怎么做？

我尝试在输入的更改事件上比较输入的键代码，但是当我尝试时，我只看到 Proxy 对象而不是事件处理程序对象。我找不到任何解决方案。在另一个组件中我实现了它，但在这个组件中我不能。

我的处理函数是：

  handleChange(event){
    this.setState({
      searchValue : this.searchInput.value
    });
    if(this.searchInput.value.length>2&&!this.state.recommendation&&this.focused){
      this.setState({
        recommendation:true
      });
    } else if(this.searchInput.value.length<3&&this.state.recommendation&&this.focused) {
      this.setState({
        recommendation:false
      });
      return;
    }
    console.log(event) //event is returned as Proxy object
    if(event.keyCode === 13){
      this.context.router.history.push(`/yardim/arama/${this.searchInput.value}`);
      return;
    }

    if(this.searchInput.value.length>2){
      this.bouncer.handle();
    }
  }

和渲染功能是：

render(){
    return(
      <div id="faq-search-box">
        {this.state.recommendation}
        <i className="icon hb-icon-search_icon"></i>
        <input id="faq-search-input" type="text" placeholder="Yard?m konusu ara..." value={this.state.searchValue} ref={input=>{this.searchInput=input;}}  onChange={this.handleChange.bind(this)} onFocus={this.onFocus} onBlur={this.onBlur}  />
        <div className="clearfix"></div>
        { this.state.recommendation &&
        <div id="faq-recommendation-box">
          {this.props.FAQRecomendations&&
          <ul>
            {this.props.FAQRecomendations.map((faq)=>
              <li key={faq.id}><a onMouseDown={(e)=>{this.onMouseDown(`/yardim/${faq.slug}#${faq.id}`,e)}} title={faq.name}>{faq.name}</a></li>
            )}
          </ul>
          }
        </div>
        } …