傳遞狀態以獲取變量中的變量

如何將狀態如this.state.username;, this.state.password;傳遞到Relay.Mutation{get variables /config}其中this.state.username和this.state.password映射到文本字段的輸入值，使loginMutation {this.state}返回null 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> 

    ); 

    } 

}

我得到的問題是，大多數例子使用的道具這是沒有辦法的辦法去了解它的反應，因爲我們使用的狀態隨時間變化的，即突變人誰由於事先

來源

2016-09-18 sachgits

唯一的問題在這裏是場你在變異本身中引用狀態。你正在將組件的狀態作爲道具傳遞給變異 - 這與將狀態作爲道具傳遞給子組件時完全相同。

所以要解決這個問題，你所需要做的就是在你的getVariables方法中改變state到props的使用。

來源

2016-09-18 22:59:40

傳遞狀態以獲取變量中的變量

回答

相關問題