传递状态以获取变量中的变量

如何将状态如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

传递状态以获取变量中的变量

回答

相关问题