Как установить имя выбранного входа равным MenuItem - PullRequest
Новая
       30

Как установить имя выбранного входа равным MenuItem

0 голосов
/ 01 июля 2018

У меня есть выбор входа со списком опций (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 });
  };

1 Ответ

0 голосов
/ 01 июля 2018

Ваша проблема в том, что вы пытаетесь установить значение Select из 'white', когда нет MenuItem со значением 'white', но 'white, 0.50'

Не знаю точно, является ли это лучшим вариантом, но вы можете попробовать добавить другое свойство к вашему состоянию, например selectedSauce, и сделать для него setState из всего event.target.value

...