Передача React Hooks в шаговый компонент - PullRequest
Новая
       61

Передача React Hooks в шаговый компонент

0 голосов
/ 30 апреля 2020

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

  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() {...}

Как можно избежать сделать это так сложно?

Спасибо

...