Как использовать Checkbox из Material-UI для переключения зачеркивания в элементе списка задач - PullRequest
Новая
       41

Как использовать Checkbox из Material-UI для переключения зачеркивания в элементе списка задач

0 голосов
/ 11 июля 2019 
const Todo: React.FC<ITodoProps> = (props) => {
const [textInput, setTextInput] = useState('');

const {
 addTodo,
 userId,
 todosForUser,
 user,
} = props;
if (user == null) {
 return (
  <Grid
    container={true}
    direction='column'
    wrap='nowrap'
  >
    <Grid
      item={true}
    >
      <Typography
        variant='h5'
      >
        INVALID USER
      </Typography>
    </Grid>
  </Grid>
);
}
return (
 <Grid
  container={true}
  direction='column'
  wrap='nowrap'
 >
  <Grid
    item={true}
  >
    <Typography
      variant='h5'
    >
      TODOS FOR {user.get('name')}
    </Typography>
  </Grid>
  <Grid
    container={true}
    item={true}
    direction='column'
    wrap='nowrap'
  >
    <Grid
      item={true}
      container={true}
      alignItems='center'
    >
      <Grid
        item={true}
      >
        <TextField
          label='title'
          value={textInput}
          onChange={(e) => {
            setTextInput(e.target.value);
          }}
        />
      </Grid>
      <Grid
        item={true}
      >
        <Button
          variant='outlined'
          onClick={
            () => {
              addTodo(
                userId,
                TodoFactory({
                  title: textInput,
                }),
              );
              setTextInput('');
            }
          }
        >
          Add Todo
        </Button>
      </Grid>
    </Grid>
    {
      todosForUser.map((todo, index) => {
        return <Grid
          key={index}
          item={true}
        >

Вот флажок 

        <Checkbox>

        </Checkbox>

Вот список целей todo 

          {todo.get('title')}




        </Grid>;
      })
    }
  </Grid>
</Grid>
);
}

Я использую пользовательский интерфейс материала, машинопись, реагирование, редукс, сагу, immutablejs.

По сути, это список задач, и я борюсь с тем, как выполнить сквозную передачу элемента списка при переключении.

Вот как это выглядит При проверке Когда не отмечен

Я не мог понять, как использовать Checkbox с onClick для этого стека. Помощь очень ценится.

Спасибо.

...