如何将选择输入的名称设置为等于 MenuItem

Question

我有一个带有选项列表 (MenuItem) 的选择输入，其中包含值 我想要我的状态中的值，以便稍后我可以将它们分派到我的 Redux 状态 我已经设法以正确的格式将正确的值放入状态 但现在选择的选项的名称， 不显示。 如何正确处理事件？

const styles = theme => ({
  button: {
    display: 'block',
    marginTop: theme.spacing.unit * 2,
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 125,
  },
});

class ControlledOpenSelect extends React.Component {
  state = {
    sauce: '',
    saucePrice: 0,
    open: false,
  };

  handleChange = event => {
    const value = event.target.value.split(",")
    this.setState({
      sauce: value[0],
      saucePrice: parseFloat(value[1]),

     });


  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  render() {
    const { classes } = this.props;
    console.log(this.state );

    return (
      <form autoComplete="off" className='pizzaSauce'>


        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="openSelect">NewAge Sauce</InputLabel>
          <Select
            open={this.state.open}
            onClose={this.handleClose}
            onOpen={this.handleOpen}
            value={this.state.sauce}
            onChange={this.handleChange}
            inputProps={{
              name: 'sauce',
              id: 'openSelect',
            }}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={'white, 0.50'}>White Sauce &euro;1,00</MenuItem>
            <MenuItem value={'red, 0.50'}>Red Sauce &euro;0,50</MenuItem>
            <MenuItem value={'double, 0.50'}>Double red sauce &euro; 1,00</MenuItem>
            <MenuItem value={'mix, 0.50'}>Mix it up! &euro; 1,50</MenuItem>

          </Select>
        </FormControl>
      </form>
    );
  }
}

ControlledOpenSelect.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ControlledOpenSelect);

在此之前，handleChange() 看起来像这样

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

Answer 1

您的问题是您尝试将值设置为'white' 的Select，而MenuItem 的值不是'white'，而是'white, 0.50'

不确定它是否是最佳选择，但您可以尝试向您的状态添加另一个属性，例如 selectedSauce 并为其设置整个 event.target.value 的 setState