Установка значений по умолчанию для группы переключателей MUI - PullRequest
Новая
       17

Установка значений по умолчанию для группы переключателей MUI

0 голосов
/ 11 марта 2019

Я использую библиотеку пользовательского интерфейса материала и использовал виджет переключения кнопок в качестве средства выбора.

Вот мои коды и коробка - https://codesandbox.io/s/50pl0jy3xk

Происходит несколько взаимодействий, но в основном пользователь может выбрать тип членства для взрослого, ребенка или младенца. Есть 3 варианта: да, нет и возможно. Когда пользователь выбирает один или несколько параметров, он передается в API.

Я добавил значения по умолчанию из своего принимающего объекта, поэтому, если пользователь уже получил членство, он выделяет их. 

const selected = [
  {
    personId: "0001657",
    fullName: "Joe Bloggs",
    seniorStatus: "Yes",
    defaultStatus: [
      { membership: "Seniors", defaultvalue: "Yes" },
      { membership: "Juniors", defaultvalue: "No" }
    ]
  }
];

Как видите, поле defaultStatus (см. Выше) было добавлено для текущих пользователей. Все, что нужно сделать, это выделить соответствующий переключатель, данные, если они не были изменены, не нуждаются в представлении в API. * 

            <ToggleButtonGroup
                className={classes.toggleButtonGroup}
                value={value[rowIdx][cellIdx.value]}
                exclusive
                onChange={(event, val) =>
                  this.handleValue(event, val, rowIdx, cellIdx.value)
                }
              >
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="yes"
                >
                  Yes
                </ToggleButton>
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="no"
                >
                  No
                </ToggleButton>
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="maybe"
                >
                  Maybe
                </ToggleButton>
              </ToggleButtonGroup>

Любая помощь или помощь была бы фантастической!

1 Ответ

1 голос
/ 11 марта 2019
  1. Вы используете «да», «нет» и «возможно» в группе ToggleButton, но используете «Да», «Нет» и т. Д. В качестве значения по умолчанию.Я думаю, что это опечатка, оба должны совпадать.
  2. Теперь вы можете установить значение следующим образом: 
    value={
  value[rowIdx]["defaultStatus"] &&      // check if defaultStatus exists
  value[rowIdx]["defaultStatus"].filter(  // filter the defaultStatus
    ds => ds.membership === cellIdx.label // and look for the specific membership type
  )[0]                                    // check if that exists   
    ? value[rowIdx]["defaultStatus"].filter(
        ds => ds.membership === cellIdx.label
      )[0].defaultvalue                   // set the value
    : null                                // otherwise null
}

Вот ваш раздвоенный пример: https://codesandbox.io/s/mjk9zy5rqp?fontsize=14

PS:

  • Я заметил, что логика handleValue больше не будет работать .Похоже, раньше это был 2D-массив, и теперь вы определили его в соответствии с новой схемой.Может быть, вы находитесь в середине редактирования.Но чтобы вы знали.
  • Я думаю, было бы лучше, если бы вы сделали defaultStatus вот так, вместо массива: 
    defaultStatus: {
  Seniors: "yes",
  Juniors: "no"
}

Таким образом, у вас не будетфильтровать массив, как я сделал в примере.Вы можете просто использовать value[rowIdx]["defaultStatus"][cellIdx.label] в качестве значения.

Обновление:

Ваша функция handleValue не работает, поскольку вы устанавливаете состояние в неправильном месте (возможно, изваш старый государственный дизайн).Вам нужно изменить его, чтобы он включал ваш новый дизайн состояния: 

handleValue = (event, val, rowIdx, cellIdx) => {
    ...
    if (!newValue[rowIdx]["defaultStatus"]) {   // check if you have defaultStatus for that row
      newValue[rowIdx]["defaultStatus"] = [];   // create empty array if that doesn't exist
    }
    const updatable = newValue[rowIdx]["defaultStatus"].filter(  // find the column corresponding to the membership
      ds => ds.membership === cellIdx                       
    );

    if (updatable[0]) {                   // if such column exists
      updatable[0]["defaultvalue"] = val; // update the defaultvalue
    } else {
      newValue[rowIdx]["defaultStatus"].push({  // otherwise create a new defaultvalue
        membership: cellIdx,
        defaultvalue: val
      });
    }
    this.setState({
      value: newValue
    });
  };

Смотрите мой обновленный код в том же URL песочницы.Опять же, логика может быть значительно упрощена с помощью простого объекта вместо массива.

...