Question

我是ReactJS，Redux和ES6的新手，我正在尝试实现一个事件处理程序，当我点击标题时，我的聊天主体会隐藏或取消隐藏（就像Facebook聊天小部件那样）。我的问题是我无法从复制的源中正确获取语法。这是我的代码：

import React, {Component} from 'react';
import chat from './styles.css';
import {connect} from 'react-redux';

class ChatWidget extends Component {

  handleClick(event) {
    console.log("test")
  }

  render() {
    return (
      <div className={chat.box}>

        <div className={chat.container}>

          <div onClick={onClick={this.handleClick.bind(this)}} 
               className={chat.header}>
            <span className={chat.name}>Idol</span>
          </div>

          <div className={chat.body}>
            This is the Body of the chat
          </div>

          <div className={chat.chat}>
            <input type="text" placeholder="Ask anything..." />
          </div>
        </div>

      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.activeUser
  };
}

export default connect(mapStateToProps)(ChatWidget);

错误：

> 16 |           <div onClick={onClick={this.handleClick.bind(this)}}
     |                                      ^

Answer 1

而不是

onClick={this.handleClick.bind(this)}

写下这个：

{ "settings": { "adIndex": 3 } }

Answer 2

建议的绑定方法是在构造函数中，因为它们只会创建一次，而不是每次渲染（）。

class Foo extends React.Component {
  constructor(props) {
    super(props);

    this.myFn = this.myFn.bind(this);
  }

  myFn() {
    // code goes here
  }

  render() {
    // code goes here also

    return <button onClick={this.myFn}>Look ma no .bind() here</button>;
  }
}

用于处理事件的ReactJS ES6语法

2 个答案: