相关疑难解决方法(0)

我刚刚开始使用ReactJS,而且我对我遇到的问题有点困惑.

我的应用程序本质上是一个带有过滤器的列表和一个更改布局的按钮.目前我使用的三个组成部分:<list />,< Filters />和<TopBar />,现在很明显,当我更改设置的< Filters />我想在引发一些方法<list />来更新我的看法.

如何让这3个组件相互交互,或者我是否需要某种全局数据模型,我可以在其中进行更改？

我正在制作并监听正常的DOM CustomEvent与父节点进行通信:

在孩子:

  var moveEvent = new CustomEvent('the-graph-group-move', { 
    detail: {
      nodes: this.props.nodes,
      x: deltaX,
      y: deltaY
    },
    bubbles: true
  });
  this.getDOMNode().dispatchEvent(moveEvent);

在父母:

componentDidMount: function () {
  this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},

这有效,但有一种特定于React的方式会更好吗？

我正在发现ReactJS和material-ui(http://material-ui.com/).

我尝试为我的应用程序创建一个默认模板.我想在分离的组件中使用AppBar和LeftNav(在新版本的Drawer中重命名).

默认情况下,AppBar上有一个菜单按钮.我想用它来打开LeftNav,但我不知道如何调用我的LeftBarComponent组件函数来打开它.

我几乎了解如何在组件之间进行通信,但在我的情况下,我不知道如何做,因为没有关于它的文档.我知道打开LeftNav元素的唯一方法是使用LeftNav.toggle()

http://material-ui.com/#/components/left-nav

谢谢你的帮助.

Default.jsx

use strict';

var React = require('react');
var pageStore = require('../../stores/page');

var MainNavbar = require('../modules/navbar.jsx');
var LeftNavbar = require('../modules/leftbar.jsx');

var getState = function() {
  return {
    title: pageStore.get().title
  };
};

var DefaultComponent = React.createClass({
  mixins: [pageStore.mixin],
  componentDidMount: function() {
    pageStore.emitChange();
  },
  getInitialState: function() {
    return getState();
  },
  render: function() {
    return (
      /* jshint ignore:start */
      <div className="main-container">
        <MainNavbar />
        <LeftNavbar />
        <div className="content">
          {this.props.children}
        </div>
      </div>
      /* jshint ignore:end …

我有这个组件.我想向我创建的每个listElement传递一个调用处理程序.如果我像下面这样做bind(this),它可以正常工作.问题是我在控制台中从React收到此警告:bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call.

var MyList = React.createClass({
  render: function () {
    var listElements = this.props.myListValues.map(function (val) {
      return (
        <ListElement onCallHandler={this.props.parentsCallHandler} val={val} />
        );
    }.bind(this));
    return (
      <ul>
          {listElements}
      </ul>
      );
  }
});

如果我不绑定它,我的孩子们不知道调用处理程序.我能做些什么不同的事情？

PS:

我知道解构分配,比如解释http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx,但我不想使用Harmony.

/** @jsx React.DOM */

var Button = React.createClass({
  handleClick: function(){
    console.log(' FROM BUTTON')
  },
  render: function() {
    return <input type='button' onClick={this.handleClick} value={this.props.dname}/>;
  } 
});

var Text = React.createClass({
  render: function() {
    return <input type='text' onClick={this.handleClick} value={this.props.ival}/>;
  } 
});


var search = React.createClass({
  handleClick: function() {
    console.log('searching')
  },
  render: function(){
    return (
      <div>
        <Text/>
        <Button dname={this.props.dname} onClick={this.handleClick} />
      </div>
    );
  }
});

React.renderComponent(<search dname='Look up' fname='Search'/> , document.body);

我创建了一个按钮和文本组件,并将它们包含在搜索组件中,现在我想要使用搜索组件的处理程序覆盖按钮的默认handleClick事件.但是this.handleClick指向按钮组件的事件处理程序..请帮助..我需要从搜索点击而不是我从FROM按钮..

我有一个从另一个React组件启动的叠加层,它有一个也会自行更改的按钮.当用户单击按钮时,会发生更改,然后按钮会更改其类名.它还向作为叠加层的子组件发送prop值.叠加层根据属性添加一个类,如果单击它.Everthing工作得很好,但现在我必须做另外一件事.当用户点击叠加层时,它必须关闭.在此更改之前,所有内容都适用于我之前提到的按钮.

那么这是按钮组件:

export default class StatusBarButton extends React.Component {

    constructor(props) {
        super(props)
        this.state = {active: false}
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ active: !this.state.active });
    }

    render() {
        var cx = require('classnames');
        var button = cx ({
            'statusbar-button-container' : true,
            'active' : this.state.active
        });
        var animation = cx ({
            'statusbar-button-cross-image' : true,
            'rotate' : true,
            'active' : this.state.active
        });

        return (
            <div className="astatusbar-center-wrapper">
                <div className={button} onClick={this.handleClick}>
                    <img src="images/navbar-element-icon-cross.png" className={animation}/>
                </div>      
                <OverlayView isOpen={this.state.active} />
            </div>
        );
    }
}

而这就是目前的叠加:

export …

孩子如何访问其父母的道具？例如，

一个父组件 - footer.jsx：

import React from 'react';
import $ from 'jquery';

import NavItem from './nav-item';

class Footer extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            publicUrl: null,
            currentUrl: null,
            navitems: [],
        };
    }

    // Then fetch the data using $.getJSON():
    componentDidMount() {
        this.serverRequest = $.getJSON(this.props.source, function (result) {
            this.setState({
                currentUrl: window.location.href,
                publicUrl: result.publicUrl,
                navitems: result.nav
            });
        }.bind(this));
    }

    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        var loop = this.state.navitems.map(function(item, index){
            return <NavItem key={index} item={item}></NavItem>;
        });

        return (
            <div>
                <div …

我有一个有1个孩子的父组件.我通过道具传递数据来更新我的孩子.最初,它工作正常但是当我点击一个按钮并使用setState更新状态时,在setState完成时,子项将使用旧值进行渲染.我已经在孩子中使用componentWillReceiveProps解决了它,但这是正确的方法吗？

在下面的代码中,如果我在filterResults函数中执行setState,它将不会更新Emplist组件.

import React, { Component } from 'react';
import {Search} from './search-bar'
import Emplist from './emplist'

class App extends Component {
    constructor(props){
        super(props);
        this.emp=[{
            name:'pawan',
            age:12
        },
        {
            name:'manish',
            age : 11
        }]
        this.state={emp:this.emp};
        this.filterResults=this.filterResults.bind(this);
    }

    filterResults(val)
    {
        if(this.state)
        {
            let filt=[];
            filt.push(
                this.emp.find(e=>{
                    return e.age==val
                })
            );
            this.setState({emp:filt});
        }
    }

    render() {
        return (
            <div className="App">
                <Search filterResults={this.filterResults}/>
                <Emplist emp={this.state.emp}/>
            </div>
        );
    }
}
export default App;

EmpList Componet

import React,{Component} from 'react'

export default class Emp extends …

我以这篇文章为例(React方式),但它对我不起作用.请指出我的错误,因为我无法理解什么是错的.

这是我看到的错误:

未捕获的TypeError:this.props.onClick不是函数

这是我的代码:

// PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

// CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

提前致谢!

这里我有一个默认数字为"3"的文本字段,我希望在输入值并单击按钮时更新它.因为,我正在更新Child中的值,我不知道如何将props传递给Parent.

var Game = React.createClass({
    getInitialState: function() {
        return {
           input: 3
        };
    },

    setSize: function() {
        //here it should update "input"
        this.setState({input: /* value from Child */ })
    },

    render: function() {
        return( 
            <div>
                <div id='game'>
                    <Menu input={this.state.input}/>
                </div>
            </div>
        )
    }  
});


var Menu = React.createClass({
    render: function() {
        return (
            <div id='menu'>
                <input type="number" id="myNumber" value={this.props.input}> </input>
                <button id="mySetNumber" onclick={this.props.setSize}>Try it</button>
            </div>
        )
    }
})

我正在使用React Native和Redux构建应用程序,并且在实现过程中遇到了问题.我收到一条错误信息

setState在现有状态转换期间无法更新(例如在render或其他组件的构造函数中).

当我加载应用程序模拟器时,它似乎在任何用户输入之前立即触发handleLogin()(并在循环上).

这是AuthenticationContainer和AuthenticationPage代码:

AuthenticationContainer.js:

'use strict'

import React, { Component, PropTypes } from 'react';
import AuthenticatePage from '../../components/Authenticate/AuthenticatePage'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import * as sessionActionCreators from '../../redux/session';
import {Actions, ActionConst} from 'react-native-router-flux'

class AuthenticateContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: ''
        };
    }

    handleLogin() {
        this.props.doLogin(this.state.email, this.state.password)
            .then(() => Actions.tabbar())
    }

    render() {
        return (
            <AuthenticatePage
                doLogin = {this.handleLogin.bind(this)} …

我有一个反应应用程序与主App.js文件,保持我的初始状态.然后我设置了一些路线来浏览我的应用程序.

在其中一条路线中,我有一个按钮,按下该按钮可处理设定状态.我知道这可行,因为我已经控制台记录了状态的变化.但是,它还要求:

window.location.href = '/';

然后,我们将我们发送到我们的主页.但是,一旦主页呈现状态,将恢复其初始设置,如App.js中所述.我不知道为什么一旦我被转发到网站的另一部分,状态就不会得到维护.鉴于我正在使用react-router这是否意味着我需要使用redux来处理应用程序的状态？