如何将 this.state 从组件发送到中继根容器答案

【问题标题】：How to send this.state from a component to relay root container如何将 this.state 从组件发送到中继根容器
【发布时间】：2016-12-14 18:25:47
【问题描述】：

我想根据作为子组件的this.state.eventid 更改我的根查询参数，但我不知道如何获取道具来中继根容器。我是基于relay-starter-kit开始的。

我有一个带有下拉菜单的 React 组件，并且 onSelect 它为 eventId 设置状态

   renderAttend() { 
    if (this.props.groups != null && this.state.success != true)   {

    var events = this.props.events.map(function(event){ 

        var boundSelect = () => {this.setState({eventid:event.nodes[0].id})}

        return <MenuItem style={{fontSize:20}}eventKey={event.nodes[0].id} onSelect={boundSelect.bind(this)}>{event.nodes[0].properties.summary} / {event.nodes[0].properties.start}</MenuItem>

                },this)


    var teams = this.props.groups.map(function(team){
        var boundSelect = () => {this.setState({teamid:team.nodes[0].id})}
        return <MenuItem style={{fontSize:20}}eventKey={team.nodes[0].id} onSelect={boundSelect.bind(this)}>{team.nodes[0].properties.name}</MenuItem>
                },this)


        return (
                <div>

        <ButtonGroup>
        <DropdownButton style={{padding:"15px",fontSize:20}}title="Events" id="bg-vertical-dropdown-2">
        {events}
</DropdownButton>
<DropdownButton style={{padding:"15px",fontSize:20,marginLeft:"5px"}} title="Groups" id="bg-vertical-dropdown-2">
  {teams}
</DropdownButton>

</ButtonGroup>
        </div>
            )

}
}

我想用这个状态来改变我的根查询... 我的应用程序... 从'react-relay'导入中继；

 export default class extends Relay.Route {
  static paramDefinitions = {
 eventId: {required: false}
  };

 static queries = {
    Event : () => Relay.QL`query{eventState(eventId:$eventId)}`,
  };

  static routeName = 'AppHomeRoute';

 }

还有我的 app.js

  import 'babel-polyfill';

 import App from './components/App';
 import AppHomeRoute from './routes/AppHomeRoute';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Relay from 'react-relay';



  ReactDOM.render(
   <Relay.RootContainer
    Component={App}
   route= {new AppHomeRoute}
   renderLoading={function() {
   return <div style=         {{display:"flex",justifyContent:"center",marginTop:"55px"}}>  <h1>Loading...</h1></div>;
   }}
   renderFailure={function(error, retry) {
    return (
     <div>
        <h1>Click Refresh</h1>
      </div>
   );
   }}


    />,
    document.getElementById('root')
    );

现在我想从 react 组件中的 this.state.eventid 更新我的根查询，但我不知道如何将数据从子组件传递到 react root.container。我不想为此使用 react-router :) p.s. this.props.events 是通过 ajax 调用传递给我的，因此它们不会保存在 relay/graphql 数据中。

【问题讨论】：

我无法将您尝试做的事情与您给出的示例联系起来。您能否详细说明或修改您的问题？

标签： javascript relay

【解决方案1】：

对于这种情况，最好的办法是将你的根查询包装成一个类似的故事

{
  store {
    events(eventId:$eventId)
  }
}

所以在根查询中你只有

export default class extends Route {
  static queries = {
    app:() => Relay.QL`query { store }`
  };

  static routeName = "AppRoute";
}

并在页面中创建一个类似的片段

let RelayApp = createContainer(SomeComponent, {
  initialVariables: {
    eventId: null
  },
  fragments: {
    app: () => Relay.QL `
      fragment on Store {
        id
        events(eventId: $eventId) {
          pageInfo {
            hasNextPage
          }
          edges {
            cursor
            node {
              name
              ...
            }
          }
        }
      }
    `,
  },
});

export
default RelayApp;

对于子组件，您将 eventId 和 onChange 事件处理程序设置为来自父组件的 props。在父组件中实现事件处理程序并调用 this.props.setVariables({eventId: someVal}) 像

// Child Component

export default class Menu extends Component {
  render() {
    return(
      <ul>
        <li onClick={() => this.props.selectItem(val)}>{val}</li>
        ...
      </ul>
    )
  }
}

// Parent Component

class Main extends Component {
  _selectItem = (val) => {
    this.props.relay.setVariables({eventId: val});
  }
  
  render() {
    return(
      <div>
        <Menu selectItem={() => this._selectItem}/>
      </div>
    )
  }  
}

let RelayApp = ...

export default Main

希望这会有所帮助。

【讨论】：

【解决方案2】：

没有简单的方法可以解决这个问题。使用 react-router-relay 或像这样嵌套查询并使用 this.props.relay.setVariables()

viewer {
    eventState(eventid:$eventid) {
        data
    }            
}

【讨论】：