javascript - Material-ui <SelectField> 项目未在 ReactJS 中显示

Question

material-ui 项目未显示。我想在 SelectField 中显示产品类别，但它不起作用。 为什么我点击选择字段它没有显示任何项目 下面给出了我的组件的所有代码

import React, { Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const style = {
    padding: '10px',
    textAlign: 'center'
};

const categories = ["mobile","laptop","camera"];

class AddProduct extends Component {
    constructor(props) {
        super();
        this.state = {
            productName: '',
            productCategory: '',
        }
        this.submit = this.submit.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
    }

    inputHandler(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

handleChangeCategory = (event, index, value) => {this.setState({productCategory:value}); console.log("value", value)}

    render() {
        return (
            <div ><center>
                <h1>Add Product for Auction</h1>
                <form onSubmit={this.submit} >
                    <br />
                    <br />
                   <SelectField
          floatingLabelText="Catogory"
          value={this.state.productCategory}
          onChange={this.handleChangeCategory}
        >
          <MenuItem value={"mobile"} primaryText="Mobile" />
          <MenuItem value={"laptop"} primaryText="Laptop" />
          <MenuItem value={"camera"} primaryText="Camera" />
        </SelectField><br />
                    <br />

                    <TextField
                        type="text"
                        hintText="Product Title"
                        name="productName"
                        value={this.state.productName}
                        floatingLabelText="Product Title"
                        onChange={this.inputHandler}
                    />
                    <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>
            </center>
            </div>
        );
    }
}

export default AddProduct;

Answer 1

您还没有定义函数submit，并且根据您的代码，您正在尝试绑定(bind)它。

this.submit = this.submit.bind(this);

定义函数提交

   submit(){
    // do something
      }

并尝试使用ES6胖箭头函数，这样你就不必绑定(bind)每个函数，就像你在上面的代码中所做的那样。

尝试这样的事情(使用 ES6 粗箭头)

import React, { Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const style = {
    padding: '10px',
    textAlign: 'center'
};

const categories = ["mobile","laptop","camera"];

class AddProduct extends Component {
    constructor(props) {
        super();
        this.state = {
            productName: '',
            productCategory: '',
        }

    }

    submit =()=>{

    }

    inputHandler =(e)=> {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

handleChangeCategory = (event, index, value) => {this.setState({productCategory:value}); console.log("value", value)}

    render() {
        return (
            <div ><center>
                <h1>Add Product for Auction</h1>
                <form onSubmit={this.submit} >
                    <br />
                    <br />
                   <SelectField
          floatingLabelText="Catogory"
          value={this.state.productCategory}
          onChange={this.handleChangeCategory}
        >
          <MenuItem value={"mobile"} primaryText="Mobile" />
          <MenuItem value={"laptop"} primaryText="Laptop" />
          <MenuItem value={"camera"} primaryText="Camera" />
        </SelectField><br />
                    <br />

                    <TextField
                        type="text"
                        hintText="Product Title"
                        name="productName"
                        value={this.state.productName}
                        floatingLabelText="Product Title"
                        onChange={this.inputHandler}
                    />
                    <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>
            </center>
            </div>
        );
    }
}

export default AddProduct;