Реагируйте: проблема связи компонента родного брата

Question

Привет, я новичок в React и написал небольшое приложение, которое работает некорректно. Я пытаюсь, чтобы мой Checkbox.js компонент связывался с моим SubmitButton.js компонентом, независимо от того, отмечен он или нет, поэтому кнопка отправки будет включена, только если пользователь установит флажок.

Я пытался использовать реквизит, как вы можете видеть в приведенном ниже коде, но, вероятно, я делаю это ужасно неправильно. Может ли кто-нибудь помочь мне узнать правильный способ сделать это? Не уверен, что это важно, но я использую библиотеку Material-UI. Спасибо.

App.js

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;

Checkbox.js

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;

SubmitButton.js

    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>
    );
  }
}

Answer 1

1.

• props.isEnabled логическое значение, а не строка.
• Остальное утверждение избыточно.
• disabled='true' не строка, это логическое значение.
• isEnabled является избыточным, поскольку disabled уже поддерживается @material-ui/core/Button, который легко может быть использован повторно

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

2 - Флажок не использует фактический обработчик value и onChange из реквизита

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

3 - У вас ужасное имя для флажка, имя вашего компонента конфликтует с @material-ui/core/Checkbox

Answer 2

Окончательный ответ состоял в том, что я должен был добавить следующее после внесения изменений, предложенных bkm412.Я добавил свойство name к элементу Checkbox и state.checkbox к элементу SubmitButton

<Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
<SubmitButton isEnabled={state.checkbox} /> 

Answer 3

1.Вы не использовали реквизит нормально

• Вы передали реквизиты в Checkbox (это было из компонента Checkboxes)

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

• Но в Checkbox.js вы не использовали этот реквизит. Пожалуйста, измените, как это.

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

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

export default Checkboxes;

• И вы уже использовали свойство name в Checkbox, чтобы вы могли передавать имя динамически.
• event.target.name is 'checkbox'. Таким образом, состояние будет храниться в state.checkbox

//...

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

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

//...

<Checkbox onChange={handleChange} checked={state.checkbox} />

//...

2.SubmitButton.js неверен

• Вы передали реквизиты isEnabled с логическим типом. Вы должны сравнить этот реквизит, как это

if(props.isEnabled)

• Отключенные свойства в Button также должны иметь логический тип.
• И нет необходимости разбивать код jsx.

return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled={!props.isEnabled}>
          Submit
        </Button>
      </div>
    );