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});