React JS Uncaught ReferenceError：locationValue（variable）が定義されていません

Question

ユーザーが入力したImageTagの値とドロップダウンメニュー（material-uiのselectField）から選択されたlocationValueを経由してサーバーに渡そうとしています。ソケット。

は、ここに私のコードです： -

var BaseImageDetails = React.createClass({ 
getInitialState:function(){ 
    return{ 
     imageTag: '', 
     locationValue: '' 
    }; 

}, 
contextTypes: { 
    socket: React.PropTypes.object.isRequired 
}, 

handleImageChange:function(event){ 
    this.setState({imageTag: event.target.value}); 
    console.log(imageTag); 
}, 

handleLocationChange:function(event){ 
    this.setState({locationValue: event.target.value}); 
    console.log(locationValue); 
}, 


clickedBase: function(e){ 
    e.preventDefault(); 
    this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue}); 


}, 

render(){ 
    console.log("wwooowwowow" , this.props.locationDetails); 
     var locationItems = this.props.locationDetails.map(function(locationItem){ 
      return <MenuItem value = {locationItem} primaryText = {locationItem} /> 
     }.bind(this));  

    console.log("locationItems------------",locationItems); 
    return(
     <div>    
      <Card> 
       <CardHeader 
        title="Please provide the following details ? " 
        actAsExpander={true} 
        showExpandableButton={true} 
       /> 
       <form onSubmit = {this.clickedBase} > 
        <TextField hintText="Image Tag" 
        floatingLabelText="Image Tag" 
        value = {this.state.imageTag} onChange = {this.handleImageChange}/> 
        <Divider /> 
        <SelectField 
         fullWidth={true} 
         hintText="Select the location of your base-image Dockerfile" 
         onChange = {this.handleLocationChange} 
         value = {this.state.locationValue}                      
         maxHeight={200}> 
         {locationItems} 
        </SelectField> 
        <Divider /> 
        <RaisedButton label="Secondary" primary={true} 
        label="Build" secondary={true} 
        type = "submit" /> 
       </form>        
       </Card> 
      </div> 
     ); 
    } 
}); 

しかし慰めながら、それは印刷し、 "捕捉されないにReferenceErrorを：locationValueが定義されていない" locationValueとimageTagのための両方。私が間違っているのどこ は、あなたたちは、あなたが{imageTag}を書くとき

Answer 1

が、それは{imageTag: imageTag}を書くのと同じです....私を助けることができ、あなたのスコープにimageTagと呼ばれるローカル変数はありません。

おそらく

this.context.socket.emit("baseImageSubmit",{ 
    imageTag: this.props.imageTag 
},{ 
    locationValue: this.props.locationValue 
}); 

それとも、destructuring assignments

const {imageTag, locationValue} = this.props; 
this.context.socket.emit("baseImageSubmit",{imageTag},{locationValue});