0

我正在学习 React，我深入研究了钩子，因为它们很优雅，最大限度地减少了类的使用，并且（起初）看起来很容易理解。使用 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() {...}
4

1 回答 1

0

react中有一个概念：提升状态。在您的情况下，您可以有一个调用该函数的父组件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';
  }
}
于 2020-05-01T14:00:26.440 回答