问React:同级组件之间的通信

EN

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import './App.css';

function App() {

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

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

  return (
   <div>
     <Container maxWidth="md">
     <NavBar />
     <Form />
     <br />
     <Checkbox onChange={handleChange('checked')} checked={state.checked} /> 
     <SubmitButton isEnabled={state.checked} /> 
     </Container>     
   </div>
  );
}

export default App;

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

function Checkboxes() {

  return (
    <div>
      <Checkbox
        name = 'checkbox'
        value="checked"
        inputProps={{ 'aria-label': 'primary checkbox', }}
      /> By checking this box you agree to all terms and conditions specified above.
    </div>
  );
}

export default Checkboxes;

    import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();
  if (props.isEnabled === 'true') {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button}>
          Submit
        </Button>
      </div>
    );
  } else 
  {
    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = 'true'>
          Submit
        </Button>
      </div>
    );
  }
}