Как изменить реквизит (вариант) материала-кнопки? - PullRequest
Новая
       10

Как изменить реквизит (вариант) материала-кнопки?

0 голосов
/ 07 октября 2019

У меня есть ряд кнопок, и я хочу изменить компонент Button, чтобы он «содержался» при нажатии, и «текст» в противном случае. Также при нажатии одной кнопки другие должны вернуться в нормальное состояние. Я попытался добавить обработчик onClick к компоненту кнопки и получить изменение состояния, но это очень запутанно. Так как я новичок в React, буду признателен за фрагмент кода, чтобы помочь. Ниже приведен код, который я пробовал, но получаю ошибку «Ошибка типа: невозможно получить свойство 'red' с неопределенной или нулевой ссылкой": 

import React, { useState } from "react";
import Button from "@material-ui/core/Button";

let initialState = {
    red: false,
    blue: false,
    green: false
};

export default function Home() {

   const [initialState, setState] = useState();

   const handleClick = (name) => event => {
   switch(name){
      case 'Red': initialState.red = true; break;
      case 'Blue': initialState.blue = true; break;
      case 'Green': initialState.green = true; break;
      default: break;
   }
   setState(initialState);
 }

 return (
    <div className="Home">
      <Button onClick={handleClick("Red")} variant={initialState.red ? "contained" : "text"}> Red </Button>
      <Button onClick={handleClick("Blue")} variant={initialState.blue ? "contained" : "text"} > blue </Button>
      <Button onClick={handleClick("Green")} variant={initialState.green ? "contained" : "text"} > green </Button>
  </div>
);
}

1 Ответ

0 голосов
/ 07 октября 2019

Вот пример использования ловушек с реагированием https://codesandbox.io/s/gracious-frog-du5s1.

Хотя звучит так, будто вы хотите переключать кнопки. Если вы используете последний материал-пользовательский интерфейс, это уже созданный компонент https://material -ui.com / components / toggle-button / . Если вы хотите изменить внешний вид, вы можете проверить CSS API для отдельных задействованных компонентов.

Редактировать: Вот обновленная песочница с комментариями, основанными на информации, которую вы дали https://codesandbox.io/s/wonderful-dhawan-ysjgk

Кроме того, вы никогда не загружали initialState в ловушку useState(initialState ), поэтому вы и получили эту ошибку.

Важно прочитать следующее примечание в документации по useState здесь https://reactjs.org/docs/hooks-reference.html#functional-updates, чтобы ваши обновления работали onClick. Возможно, для этого даже можно использовать крючок useReducer.

...