IT技术 - 当 JSX 保存到状态时，选择菜单项不显示 - 吾爱随笔录

当 JSX 保存到状态时，选择菜单项不显示

IT技术 reactjs material-ui

2021-05-16 08:03:38

从这里的演示工作：https : //material-ui.com/demos/selects/我收到了一些奇怪的结果。具体来说，当我从下拉菜单中选择一个项目时，this.props.value更新很好......但 MenuItem 没有显示。

如果我将<FormControl>标签直接放在渲染中，它工作正常。如果我放入一个变量，然后用它 setState 并将其插入到渲染中......它不起作用。

例子：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const styles = theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
    },
    selectEmpty: {
        marginTop: theme.spacing.unit * 2,
    },
});

class Question extends React.Component {
    state = {
        age: '',
        age2: '',
        slct: ''
    };

    componentDidMount() {
        const { classes } = this.props;
        var mySelect =
            <FormControl className={classes.formControl}>
                <InputLabel htmlFor="age-simple">Age</InputLabel>
                <Select
                    value={this.state.age}
                    onChange={this.handleChange}
                    inputProps={{
                        name: 'age',
                        id: 'age-simple',
                    }}
                >
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>
                    <MenuItem value={10}>Ten</MenuItem>
                    <MenuItem value={20}>Twenty</MenuItem>
                    <MenuItem value={30}>Thirty</MenuItem>
                </Select>
            </FormControl>
        this.setState({ slct: mySelect });
    }

    handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };


    render() {
        const { classes } = this.props;
        return (
            <div>
                {this.state.slct}
                <p>Value:</p>{this.state.age}

                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="age-simple2">Age</InputLabel>
                    <Select
                        value={this.state.age2}
                        onChange={this.handleChange}
                        inputProps={{
                            name: 'age2',
                            id: 'age-simple2',
                        }}
                    >
                        <MenuItem value="">
                            <em>None</em>
                        </MenuItem>
                        <MenuItem value={10}>Ten</MenuItem>
                        <MenuItem value={20}>Twenty</MenuItem>
                        <MenuItem value={30}>Thirty</MenuItem>
                    </Select>
                </FormControl>
                <p>Value:</p>{this.state.age2}

            </div>
        );
    }
}

export default withStyles(styles)(Question);

您可以看到根据我在下拉列表中选择的答案，两者的“值”如何正确更新......但从视觉上看，MenuItem 标签从未出现过来自状态的标签：

帮助？

（仅供参考：这些项目在父母的<form>。）

2个回答

它必须是用于渲染的函数或数组。为了使您的代码工作，它应该是：

  state = {
    slct: <FormControl>...</FormControl>
  }

  slctRenderer = () => this.state.slct;

  render() {
    return (
      <div>
        {this.slctRenderer()}
      </div>
    );
  }

使用来自@Jee Mok 的信息......它可以作为一个函数工作的想法（即使其他项目似乎并不关心）让我尝试对初始代码进行以下更改：

增加了这个功能：

selectRenderer() {
        const { classes } = this.props;
        return (
        <FormControl className={classes.formControl}>
            <InputLabel htmlFor="age-simple">Age</InputLabel>
            <Select
                value={this.state.age}
                onChange={this.handleChange}
                inputProps={{
                    name: 'age',
                    id: 'age-simple',
                }}
            >
                <MenuItem value="">
                    <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
        </FormControl>
        );
    };

然后在组件的渲染函数中，我调用它：

render() {
    return (
        <div>
            {this.selectRenderer()}
            <p>Value:</p>{this.state.age}
        </div>
    );
}

这有效。（因此我会在两天内将其标记为已回答）

然而，我很好奇，为什么需要将这个特定的 JSX 块作为函数引入，而其他 JSX 块则不需要。（具体来说，一个 material-ui 文本字段可以正常工作，就像我在 OP 中所做的那样分配给状态）我希望能够构建一次这个问题（最好作为componentDidMount生命周期的一部分），然后通过内置的-以某种方式向渲染函数提出问题。State 似乎是这样做的方法，但由于某种原因我不能使用 Select/MenuItems。

其它你可能感兴趣的问题

上一篇Redux Form Material UI：选择嵌套列表不起作用下一篇未处理的Promise拒绝警告：