React JS Uncaught ReferenceError: locationValue(variable) is not defined

Question

我试图通过套接字将用户输入的ImageTag 的值以及从下拉菜单中选择的locationValue（selectField of material-ui）传递给服务器。

这是我的代码：-

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

但是在安慰时它会为 locationValue 和 imageTag 打印 "Uncaught ReferenceError: locationValue is not defined"。你们能帮我看看我哪里做错了吗....

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

React JS Uncaught ReferenceError: locationValue(variable) is not defined

React JS Uncaught ReferenceError: locationValue(variable) is not defined

javascript

reactjs

socket.io-1.0