javascript - react 函数中的类激活

Question

告诉我如何单击“下一步”按钮来激活元素的类。当点击某个类时，样式应该改变。如何在这个函数中正确实现这个例子？

    export default ({ title, img, onNext }) => {

    return (
        <div>
                <div className={cn('info')}>                          
                            <Button shape="round">Start</Button>
                            <Button shape="round" type="default" onClick={onNext}> Next</Button>                        
                    </div>

                </div>
    );
};

Answer 1

创建一个函数来进行点击操作

    import React, { useState } from 'react';

    const MyComponent = ({ title, img, onNext }) => {
    const [active, setActive] = useState(false);

    const onNext = () => {
      setActive(true);
    }
    return (
       <div>
          <div className={cn('info')} style={active ? {backgroundColor: '#ff0000'} : null}>                          
            <Button shape="round">Start</Button>
            <Button shape="round" type="default" onClick={onNext}> 
               Next
            </Button>                        
          </div>
      </div>
        );
    }
export default MyComponent;

与您也可以动态更改 className 相同