Question

这是我第一次在StackOverFlow上发帖 - 跟我一起承担

我正在构建一个React应用程序并从我的用户收集信息，这需要我使用带有Material-UI的DropDownMenu。我想在下拉菜单中记录用户选择的选项的字符串值，并将其设置为state。编写代码的方式，它只将一个整数'value'推送到state，它不会与用户选择的字符串值相关联。我一直在玩写一个函数（超级难看，我知道），它将数值与所需的字符串值相关联，但它没有正确返回信息。我可以选择相同的选项，每次它都会记录不同的字符串值和不同的数值。

我的目的是推动“贫困缓解”或“教育”或用户选择陈述的任何内容（通过状态下的displayValue属性），但它永远不会返回正确的字符串。

这是我的代码。任何建议表示赞赏。如果您需要查看其他任何代码，请告诉我们？

    class Sandbox extends React.Component {
constructor(props){
    super(props)
        this.state = {
            loading: false,
            finished: false,
            stepIndex: 0,
            value: 1,
            ddvalue: 0,
            displayValue: ""
        };

    } 

    handleChange = (event, index, value) => {
        console.log(value)

if(value === 0){
    var test0 = "Event Staffing";
    this.setState({displayValue: test0});

} else if (value === 1){
    var test1 = "Environmental";
    this.setState({displayValue: test1});

} else if (value === 2){
    var test2 = "Parks and Recreation";
    this.setState({displayValue: test2});

} else if (value === 3){
    var test3 = "Arts and Crafts";
    this.setState({displayValue: test3});

} else if (value === 4){
    var test4 = "Infrastructure";
    this.setState({displayValue: test4});

} else if (value === 5){
    var test5 = "Household Tasks";
    this.setState({displayValue: test5});

} else if (value === 6){
    var test6 = "Education";
    this.setState({displayValue: test6});

} else if (value === 7){
    var test7 = "Animals";
    this.setState({displayValue: test7});

} else if (value === 8) {
    var test8 = "Disaster Relief";
    this.setState({displayValue: test8});

} else if (value === 9){
    var test9 = "Poverty Alleviation";
    this.setState({displayValue: test9});

}


console.log(this.state.displayValue)
    }

    case 3:
    return (
        <div>
        <div>
                <TextField hintText="Image URL" />
                <br />
                <TextField hintText="Any Additional Perks?" />
                <br />
                <DropDownMenu
                    value={this.state.ddvalue}
                    onChange={this.handleChange}
                    style={styles.customWidth}
                    autoWidth={false}
                    >
                    <MenuItem value={1} primaryText="Event Staffing" />
                    <MenuItem value={2} primaryText="Environmental" />
                    <MenuItem value={3} primaryText="Parks and Recreation" />
                    <MenuItem value={4} primaryText="Arts and Crafts" />
                    <MenuItem value={5} primaryText="Infrastructure" />
                    <MenuItem value={6} primaryText="Household Tasks" />
                    <MenuItem value={7} primaryText="Education" />
                    <MenuItem value={8} primaryText="Animals" />
                    <MenuItem value={9} primaryText="Disaster Relief" />
                    <MenuItem value={10} primaryText="Poverty Alleviation" />
                    </DropDownMenu>
  </div>

Answer 1

＆＃34;价值＆＃34;字段对类型没有要求。如果你想把一个字符串作为值，你可以轻松地这样做;

<MenuItem value="Event Staffing" primaryText="Event Staffing" />

另请注意，setState函数是异步的。 <{1}}之后的console.log状态不能保证显示更改后的值。

Answer 2

import React from 'react';
import TextField from 'material-ui/TextField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';

const styles = {
    customWidth: {
        width: 200,
    },
};

class Sandbox extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,
            finished: false,
            stepIndex: 0,
            value: 1,
            ddvalue: 0,
            displayValue: ""
        };

    }

    handleChange = (event, index, value) => {
        console.log(value);
        this.setState({displayValue: value});
        console.log(this.state.displayValue);
    };

    render(){
        return (
            <div>
                <div>
                    <TextField hintText="Image URL" />
                    <br />
                    <TextField hintText="Any Additional Perks?" />
                    <br />
                    <DropDownMenu
                        value={this.state.displayValue}
                        onChange={this.handleChange}
                        style={styles.customWidth}
                        autoWidth={false}
                    >
                        <MenuItem value="Event Staffing" primaryText="Event Staffing" />
                        <MenuItem value="Environmental" primaryText="Environmental" />
                        <MenuItem value="Parks and Recreation" primaryText="Parks and Recreation" />
                        <MenuItem value="Arts and Crafts" primaryText="Arts and Crafts" />
                        <MenuItem value="Infrastructure" primaryText="Infrastructure" />
                        <MenuItem value="Household Tasks" primaryText="Household Tasks" />
                        <MenuItem value="Education" primaryText="Education" />
                        <MenuItem value="Animals" primaryText="Animals" />
                        <MenuItem value="Disaster Relief" primaryText="Disaster Relief" />
                        <MenuItem value="Poverty Alleviation" primaryText="Poverty Alleviation" />
                    </DropDownMenu>
                </div>
            </div>)}
    }

export default Sandbox;

以下是您的代码中所做的修改这将有助于消除您在代码中编写的if / else条件

如何让Material-UI DropDownMenu返回所选的

2 个答案: