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

Question

我想根据作为子组件的 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')
    );

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

Answer 1

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

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

Answer 2

对于这种情况，更好的做法是将您的根查询包装成一个故事，例如

{
  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 事件处理程序设置为来自父组件的道具。在父组件中，您实现事件处理程序并调用 this.props.setVariables({eventId: someVal}) like

// 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

希望这会有所帮助。

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

How to send this.state from a component to relay root container

javascript

relay