javascript - Material-ui 项目未在 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;