小编Dmi*_*dov的帖子

我正在尝试设置一个带有反应的应用程序,除了我的模态之外,一切都很顺利.我使用了以下链接中的代码,未触及,我收到错误.https://github.com/facebook/react/blob/master/examples/jquery-bootstrap/js/app.js

试试这个小提琴http://jsbin.com/eGocaZa/1/edit?html,css,output

回调函数似乎无法访问"this".如果在控制台中记录"this",则会记录窗口对象.

openModal: function() {
  this.refs.modal.open();
},

我确实通过了这个并返回一个似乎有效的新功能,但这似乎并不正确,并且与jsfiddle不一致.我在本地获得了模态激发,但后来我遇到了与close函数相同的问题.任何帮助,将不胜感激.谢谢!

var Example = React.createClass({
  handleCancel: function() {
    if (confirm('Are you sure you want to cancel?')) {
      this.refs.modal.close();
    }
  },

  render: function() {
    var modal = null;
    modal = (
      <BootstrapModal
        ref="modal"
        confirm="OK"
        cancel="Cancel"
        onCancel={this.handleCancel}
        onConfirm={this.closeModal}
        title="Hello, Bootstrap!">
        This is a React component powered by jQuery and Bootstrap!
      </BootstrapModal>
    );
    return (
      <div className="example">
          {modal}
        <BootstrapButton onClick={this.openModal(this)}>Open modal</BootstrapButton>
      </div>
    );
  },

  openModal: function(obj) {
    return function(){obj.refs.modal.open();}
  },

  closeModal: function() { …

正如标题所示.

我想通过单击元素来触发事件.

在JSX中,onClick运行良好,但不知何故,它只是在原始JavaScript中死了.

React.DOM.button({ type: 'button' }, { onClick: this.handleClick }, 'js button')

可能是什么问题？

看看演示

我在Ubuntu 14.04上

我安装了节点

sudo apt-get install node

我安装了npm

sudo apt-get install npm

我安装了react-tools

sudo npm install -g react-tools

当我尝试:

jsx -h

我没有输出.什么想法可能是错的？可能是pebcak,但我会很感激.

我最近开始学习ReactJS,但我对异步调用感到困惑.

假设我有一个带有用户/通过字段和登录按钮的登录页面.组件看起来像:

var Login = React.createClass({

    getInitialState: function() {
        return {
            isLoggedIn: AuthStore.isLoggedIn()
        };
    },

    onLoginChange: function(loginState) {
        this.setState({
            isLoggedIn: loginState
        });
    },

    componentWillMount: function() {
        this.subscribe = AuthStore.listen(this.onLoginChange);
    },

    componentWillUnmount: function() {
        this.subscribe();
    },

    login: function(event) {
        event.preventDefault();
        var username = React.findDOMNode(this.refs.email).value;
        var password = React.findDOMNode(this.refs.password).value;
        AuthService.login(username, password).error(function(error) {
            console.log(error);
        });
    },

    render: function() {

        return (
                <form role="form">
                    <input type="text" ref="email" className="form-control" id="username" placeholder="Username" />
                    <input type="password" className="form-control" id="password" ref="password" placeholder="Password" />
                    <button type="submit" className="btn btn-default" onClick={this.login}>Submit</button>
                </form> …

非常简单的问题,当我在渲染时通过数组循环与.map函数反应,说:

render() {
        let board = this.props.board;

        return (
            <div>
                 {
                   board.map((piece,index) => {
                       return (
                           <Piece data={piece}/>
                       );
                   })
                 }
            </div>
        );
    }

我正在尝试每5件添加一个断行,所以 在我尝试连接或者做这样的事情之前(index % 5 == 0)添加:<br /><Piece />
+

board.map((piece,index) => {
      return (
                (index % 5 == 0) ? <br /> : ''
                <Piece data={piece}/>
             );
})

我得到了[Object object]'s 矩阵的输出

我正在尝试制作一个div可拖动的。该div包含img充当了图像的标签和一些文本。问题是，当我通过点击开始拖动img时，img被拖动的，而不是父母div。我该如何解决？

<div className="container-selected" id={id}
     draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
    <img src={status} />
    <span className="beacon-id">Some text</span>
</div>

这是CSS：

.container-selected {
  padding: 10px;
  position: relative;
  z-index: 0;

  img {
    width: 3em;
    z-index: -1;
  }

  .beacon-id {
    position: absolute;
    left: 0;
    top:  53px;
    width: 100%;
    text-align: center;
  }
}

我目前正在研究我的第一个React项目,我遇到了在组件之间传递数据的问题.我正在使用此库日历小部件,以根据列表中的选定项目设置不同的日期.

https://github.com/vazco/meteor-universe-react-widgets

在这个结构中,我有四个在我的树中的交互组件:

-----A-----
|         |
C         B
|
|
D

我目前正在从顶级组件(组件A)的列表(组件B)中存储所选项目的数据.我想要传递数据的组件是组件D.我想要做的是创建一个状态并将值传递给C然后传递给D.不幸的是,C是库中的日历组件,我无法真正操作.

因为我需要D中访问B中的选择所生成的对象而不能操作C,有没有办法在子组件的头部传递值？

代码片段:

如何在A中调用组件C(日历),同时也传入组件D(dayComponent).

<Calendar dayComponent={DayComponent}/>;

日历组件声明和导入

System.import('{universe:react-widgets}').then(ReactWidgets => {

    Calendar = ReactWidgets.Calendar;
});

Day组件返回日历日的样式.

 DayComponent = React.createClass({
  render() {
    var date = this.props.date
      , style = { backgroundColor: date < new Date() && '#F57B7B' }

    return (<div style={style}>
        {this.props.label}
      </div>);
  }
})

我希望使用Swift找到过去50年中每个星期日的日期.我认为'enumerateDates'(日历的实例方法)可能有所帮助.但我无法弄清楚如何使用它.

func enumerateDates(startingAfter: Date, matching: DateComponents, matchingPolicy: Calendar.MatchingPolicy, repeatedTimePolicy: Calendar.RepeatedTimePolicy, direction: Calendar.SearchDirection, using: (Date?, Bool, inout Bool) -> Void)

Mocha可以在Babel的帮助下处理JSX和ES2015语法:

mocha --compilers js:babel-register

但是当我尝试在我的测试文件夹上运行它时,它找不到任何测试.原因是那里的文件有.jsx扩展名,Mocha只查找.js.

是否可以配置Mocha来查找.jsx/ .es6文件？