将状态传递给中继中的getvariables Mutation

如何将状态如this.state.username;, this.state.password;传递到Relay.Mutation{get variables /config}，其中this.state.username和this.state.password被映射到文本字段的输入值，这使得loginMutation {this.state}返回null中继中的所有示例似乎是片面的(创建查询)，我有Login Component和Login Mutation这是我的文件

//loginMutation named as verifyMutation.js
import Relay from 'react-relay';
class VerifyMutation extends Relay.Mutation {
  getMutation() {
    return Relay.QL`
      mutation { mpesaVerify }
    `;
  }
  getVariables() {
    return {
      phoneNumber: this.state.username,//this.state return null
      transactionID: this.state.password//this.state retuns null
    };
  }
  getFatQuery() {
    return Relay.QL`
      fragment on verificationPayload {
        featureEdge,
        viewer { features }
      }
    `;
  }
  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'viewer',
      parentID: this.props.viewerId,
      connectionName: 'features',
      edgeName: 'featureEdge',
      rangeBehaviors: {
        '': 'append',
      },
    }];
  }
}
export default VerifyMutation;

和loginComponent在这里

//loginComponent.js
import React from 'react';
import Relay from 'react-relay';
import { Grid, Cell, Button, Textfield } from 'react-mdl';
import  VerifyMutation from './VerifyMutation';
import Page from '../Page/PageComponent';
import info from './infoComponent';
import styles from './Verify.scss';

export default class Verify extends React.Component {
  static propTypes = {
    viewer: React.PropTypes.object.isRequired
  };
  constructor (props){
    super(props);
    this.state =  {username:'',password:''}
  };
  onUsernameChange(e){
    this.setState({username:e.target.value});
  };
  onPasswordChange (e){
    this.setState({password:e.target.value});
  };
  handleSubmit = (e)=>{
    e.preventDefault();
    //enter relay world
    const verifyMutation = new VerifyMutation({viewerId:this.props.viewer.id, ...this.state});
    Relay.Store.commitUpdate(verifyMutation, {onError: err => console.error.bind(console,err)});
  }

  render() {
    return (
      <div>
        <Page heading='Verify Payments'>
          <Grid>
            <Cell col={4}>
              <h3>How to go about it</h3>
              <p>
                username: {this.state.username} and
                password: {this.state.password}
              </p>
            </Cell>
            <Cell col={4}>
              /*if verified show results here instead of this */
              <form  onSubmit={this.handleSubmit.bind(this)} >
                <Textfield
                  value={this.state.username}
                onChange={this.onUsername.bind(this)}
                error="username please"
                label="username."
                error="please use valid username"
                required={true}
                style={{width: '200px'}}/>
                <Textfield
                  value={this.state.username}
                  onChange={this.onUsernameChange.bind(this)}
                  pattern="[A-Z0-9]{7,10}"
                  error="should be 7 to 10 letters"
                  label="password"
                  required={true}
                  style={{width: '200px'}}
                />
                <input type="hidden" value={this.props.viewer.id} />
                <Button raised colored >Verify</Button>
              </form>
            </Cell>
            <Cell col={4}>
            </Cell>
          </Grid>
        </Page>
      </div>
    );
  }
}

我得到的问题是，大多数例子使用道具，这不是去它在反应的方式，因为我们使用状态字段的变化随着时间的推移，即突变任何人提前感谢