Блог

 <FormControlLabel onChange={handleCurrentProjectChange} value="end" control={<Checkbox style={{ color: "#C8102E" }} />} label={
                          <Typography style={{ fontSize: 15 }}>
                            Check if project "In Progress"
                          </Typography>
                        }
                        labelPlacement="end"
                  
  

Итак, вот мой флажок из Material-UI, и я хочу создать const bool, который позволяет мне отправлять данные, если флажок установлен, он отправляет как «true». Я знаю, что мне нужно добавить check={ } prop внутри FormControl, но я не знаю, как его вызвать.

 const HandleProgressCheckbox = (project_in_progress) => {
    setProgressCheckbox({currentProject.project_in_progress ? true : false}),
  };
  

Я пытался начать, но это может быть совершенно неправильно.
Кстати, у флажка есть метка «project_in_progress». Извините за мои плохие навыки объяснения, я надеюсь, это понятно. Помогите, пожалуйста.

В моем случае я сделал это:

 ...
const {isPublic, isBuzy} = this.props;
    
<FormControlLabel
    control={ 
        <Checkbox
            onChange={this.handleChangeIsPublic}
            name='isPublic'
            checked={isPublic}
            disabled={isBuzy} /> }
        label="Is public?"
/>
...
  

и реализация handleChangeIsPublic:

 handleChangeIsPublic = (e) => {
    const isChecked = e.target.checked;

    const { dispatch } = this.props;
    dispatch(actions.setPublicState(isChecked));
}
  

Я использую «redux» в своем проекте, если вам нужно сделать это только с одним «reactjs», тогда вам нужно что-то вроде:

 handleChangeIsPublic = (e) => {
    const isChecked = e.target.checked;

    this.setState({
        isPublic: isChecked ? true : false,
    });
}
  

Upd:

Я изменил вашу версию, чтобы использовать перехваты, и вот что произошло:

 import React, { useState, useEffect } from 'react';

import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Typography from '@material-ui/core/Typography';

export default function ProjectInProgress() {
    const [inProgress, setInProgress] = useState(false);

    function handleInProgressChange(e) {
        setInProgress(e.target.checked);
    }

    useEffect(() => {
        if (inProgress === true) {
            alert(`inProgress is ${inProgress}`);
        }
    });

    return (
        <FormControlLabel
            value = "end"
            control = {
                        <Checkbox
                            onChange={handleInProgressChange}
                            checked={inProgress}
                            style={{ color: "#C8102E" }} />}
                            label={
                                    <Typography style={{ fontSize: 15 }}>
                                        Check if project "In Progress"
                                    </Typography>}
            labelPlacement="end"
        />
    )
}
  

Я надеюсь, что смогу вам помочь.