Передача состояния флажка в шаговом компоненте - PullRequest
Новая
       20

Передача состояния флажка в шаговом компоненте

0 голосов
/ 01 мая 2020

Я изучаю React, и я глубоко погрузился в ловушки, поскольку они элегантны, минимизируют использование классов, и (на первый взгляд) казались легкими для понимания. Использование компонента stepper и флажков Material-ui. Я пытаюсь экспортировать значения того, что было выбрано, и отобразить его на следующем шаге степпера. Проверено: Это Но это кажется слишком сложным в моем случае. Однако я не уверен, нужно ли мне передавать массив состояний в качестве подпорки и передавать его при возврате компонента из двух флажков или отображать массив и передавать его через функцию? 

const [state, setState] = React.useState({
    checkedA: false,
    checkedB: false,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
//In my try to export the state I'm passing it to a funcvtion every time a change is made
SelectedBoxes({state})
  };



  return (
    <FormGroup row>
      <FormControlLabel
        control={
          <Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />
        }
        label="Secondary"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={state.checkedB}
            onChange={handleChange}
            name="checkedB"
            color="primary"
          />
        }
        label="Primary"
      />

    </FormGroup>
  );
}

//Here is where the function of Selectedboxes is defined
export function SelectedBoxes(checked) {
  return (
    <div>You selected: {checked}</div>
  );
}

function getSteps() {
  return ['Checkboxes', 'SelectedBoxes'];
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return <Checkboxes />;
    case 1:
      return <SelectedBoxes />;
    default:
      return 'Unknown step';
  }
}

export default function HorizontalLinearStepper() {...}

1 Ответ

0 голосов
/ 01 мая 2020

В реакции есть концепция: Поднятие состояния . В вашем случае вы можете иметь родительский компонент, который вызывает функцию getStepContent. Поднимите состояние с checkbox component на родительский компонент. Передайте функцию handleChange как опору для флажка, например <Checkboxes handleChange={handleChange} />. Затем, когда шаг изменяется, вы можете передать состояние флажка на <SelectedBoxes checkboxState={checkboxState} />

const [checkboxState, setCheckboxState] = useState({
    checkedA: false,
    checkedB: false,
})

const handleChange = (event) => {
    setCheckboxState({ ...state, [event.target.name]: event.target.checked });
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return <Checkboxes handleChange={handleChange} />;
    case 1:
      return <SelectedBoxes checkboxState={checkboxState} />;
    default:
      return 'Unknown step';
  }
}
...