小编mal*_*ers的帖子

React.js,在触发函数之前等待setState完成?

这是我的情况:

  • on this.handleFormSubmit()我正在执行this.setState()
  • 在this.handleFormSubmit()中,我调用this.findRoutes(); - 这取决于this.setState()的成功完成
  • this.setState(); 在this.findRoutes被调用之前没有完成...
  • 如何在调用this.findRoutes()之前等待this.handleFormSubmit()内的this.setState()完成?

一个低于标准的解决方案:

  • 把this.findRoutes()放在componentDidUpdate()中
  • 这是不可接受的,因为会有更多的状态更改与findRoutes()函数无关.我不想在更新无关状态时触发findRoutes()函数.

请参阅下面的代码段:

handleFormSubmit: function(input){
                // Form Input
                this.setState({
                    originId: input.originId,
                    destinationId: input.destinationId,
                    radius: input.radius,
                    search: input.search
                })
                this.findRoutes();
            },
            handleMapRender: function(map){
                // Intialized Google Map
                directionsDisplay = new google.maps.DirectionsRenderer();
                directionsService = new google.maps.DirectionsService();
                this.setState({map: map});
                placesService = new google.maps.places.PlacesService(map);
                directionsDisplay.setMap(map);
            },
            findRoutes: function(){
                var me = this;
                if (!this.state.originId || !this.state.destinationId) {
                    alert("findRoutes!");
                    return;
                }
                var p1 = new Promise(function(resolve, reject) {
                    directionsService.route({
                        origin: {'placeId': me.state.originId},
                        destination: {'placeId': me.state.destinationId}, …
Run Code Online (Sandbox Code Playgroud)

javascript state reactjs

84
推荐指数
5
解决办法
6万
查看次数

React,为什么在ES6类构造函数中使用super(props)?

我意识到super关键字可用于调用父组件中的函数.但是,我不完全清楚为什么你会在下面的例子中使用super关键字 - 只是传递它传递给构造函数的任何道具.

请问有人可以了解在ES6类构造函数中使用super关键字的各种原因吗?

  constructor(props) {
    super(props);

    this.state = {
      course: Object.assign({}, this.props.course),
      errors: {   }
    };

    this.updateCourseState = this.updateCourseState.bind(this);
  }
Run Code Online (Sandbox Code Playgroud)

super ecmascript-6 reactjs

12
推荐指数
1
解决办法
2万
查看次数

反应大日历,添加bootstrap popover到事件?

看起来您可以为react日历组件创建自定义组件.我在看这个例子:

https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/customView.js.

但目前尚不清楚如何创建自定义事件组件.我也查看了文档,但没有明确的例子:

http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components

我特别感兴趣的是为每个事件创建一个工具提示,显示更详细的事件描述.

任何人都可以指出某人为反应大日历创建自定义组件的示例吗?

更新:这是日历的图像和月视图中呈现的一些事件.我在想,一个自定义事件肯定应该包括'rbc-event'和'rbc-event-content'.要添加引导工具提示,我在自定义事件组件中考虑这样的事情:

在此输入图像描述

这里是在react-big-calendar源代码中创建事件单元组件的地方.

    return _react2.default.createElement(
              'div',
              _extends({}, props, {
                style: _extends({}, props.style, style),
                className: (0, _classnames2.default)('rbc-event', className, xClassName, {
                  'rbc-selected': selected,
                  'rbc-event-allday': isAllDay || _dates2.default.diff(start, _dates2.default.ceil(end, 'day'), 'day') > 1,
                  'rbc-event-continues-prior': continuesPrior,
                  'rbc-event-continues-after': continuesAfter
                }),
                onClick: function onClick() {
                  return onSelect(event);
                }
              }),
              _react2.default.createElement(
                'div',
                { className: 'rbc-event-content', title: title },
                Component ? _react2.default.createElement(Component, { event: event, title: title }) : title
              )
    );
  }
});

exports.default = EventCell;
module.exports = exports['default'];
Run Code Online (Sandbox Code Playgroud)

我决定尝试扩展EventCell组件,当我作为事件组件prop传递它时,事件不再有任何内容.不确定如何将事件详细信息传递到EventCell组件内的"rcb-event"div.见下文..

import …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap reactjs

9
推荐指数
1
解决办法
5711
查看次数

React.js,事件监听器onChange for Specific Prop?

我想this.props.map在React组件上设置时触发一个函数- 使用ES6类语法定义:

export default class MapForm extends React.Component {...

目前,我正在使用componentDidUpdate()它,因为它在props设置时被触发- 但它也是由其他不相关的事件触发,这是不理想的.

另一方面,componentWillReceiveProps()在组件的生命周期的早期发生(在此时this.props.map返回undefined)

所以我想this.props.map设置时触发一个函数.

我错过了一个钩子吗?或者某种模式?

javascript reactjs

6
推荐指数
1
解决办法
925
查看次数

如何实现elasticsearch不过滤?

我使用的是弹性搜索版本1.7.5

我从这篇文章中得到了一些想法: Elastic search Not filter inside and filter

下面的查询似乎没有过滤掉与 17 相关的项目。item_category_id您可以看到语法错误吗?not数组外部, 内部定义的术语filters工作正常。

      {
      query: {
          filtered: {
              filter: {
                  and: {
                      filters: [
                          { not: {
                                  filter: {
                                      terms: {item_category_ids: [17] }
                                  }
                              }
                          },
                          { term: { user_inactive: false } },
                          { term: { kind: 1 } }
                      ]
                  }
              }
          }
      }
Run Code Online (Sandbox Code Playgroud)

elasticsearch

6
推荐指数
2
解决办法
8744
查看次数

React,为什么{}在将props传递给无状态功能组件时?

我的感觉是({course})语法是从props对象中提取属性'course'.从而在组件内部调用"课程"属性更加简洁.如果我使用(props)语法传递道具,而不是({course}).然后,我必须说'props.course.authorId',例如.

我的思路是否正确?如果你可以扩展这里发生的最新情况并填补任何空白,那将是很棒的.

import React, {PropTypes} from 'react';
import {Link} from 'react-router';

const CourseListRow = ({course}) => {
  return (
    <tr>
      <td><a href={course.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/course' + course.id}>{course.title}</Link></td>
      <td>{course.authorId}</td>
      <td>{course.category}</td>
      <td>{course.length}</td>
    </tr>
  );
};

CourseListRow.propTypes = {
  course: PropTypes.object.isRequired
};

export default CourseListRow;
Run Code Online (Sandbox Code Playgroud)

destructuring ecmascript-6 reactjs

5
推荐指数
1
解决办法
1874
查看次数

Javascript sessionStorage Across tabs?

I am using sessionStorage to ensure an action only happens once per session. However, if a user opens a new window - the sessionStorage is not carried over to the new window, and the action is executed again. See my code below:

if sessionStorage.alreadyTracked != "1"
  sessionStorage.alreadyTracked = "1"
  ...
Run Code Online (Sandbox Code Playgroud)

Is there an easy way to do this that applies to all tabs? Maybe I need to use a cookie?

javascript session-variables session-cookies

4
推荐指数
1
解决办法
1万
查看次数

如何在Ruby中查找,返回和删除数组中的最大值?

我想在整数数组中找到最大值,返回该值,并将其从数组中删除.这有内置功能吗?

因为a = [1,2,3,4],我可以很容易地做到这a.max一点返回4.但是,a[....]保持不变.

ruby arrays

3
推荐指数
1
解决办法
2027
查看次数

如果引发异常,Rails会缓存任何内容吗?

我想知道在以下情况下rails是否缓存任何内容:

  Rails.cache.fetch("some_key", expires_in: 1.day) do
    service.call # raises exception
    []
  end
Run Code Online (Sandbox Code Playgroud)

我担心,因为如果Rails.cache.fetch块内的请求失败,我想重试下一个请求。不要让用户等待24HRS重试。

caching ruby-on-rails

3
推荐指数
1
解决办法
621
查看次数