React JS Uncaught ReferenceError：未定義locationValue（變量）

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。 你們能幫助我在哪裏，我做錯了....

Answer 1

當你寫{imageTag}，這是一樣的書寫{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});