1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| import React, { useState } from 'react'; import VelButton from '../velButton'; import styles from './styles.module.scss';
export default function Gradient() { const [color1, setColor1] = useState('#00f260');//使用useState绑定事件 const [color2, setColor2] = useState('#0575e6'); function handleInputChange(e: any) { const { name, value } = e.target; if (Object.is(name, 'color1')) { setColor1(value); } if (Object.is(name, 'color2')) { setColor2(value); } } function handleClick() { setColor1('#00f260'); setColor2('#0575e6'); } return ( <div className={styles.container} style={{ background: `linear-gradient(75deg,${color1},${color2})` }}> <div className={styles.inputGroup}> <label htmlFor="">请选择第一个颜色</label> <input type="color" name="color1" value={color1} id="" className={styles.inputColor} onChange={handleInputChange} /> </div> <div className={styles.inputGroup}> <label htmlFor="">请选择第二个颜色</label> <input type="color" name="color2" value={color2} id="" className={styles.inputColor} onChange={handleInputChange} /> </div> <div> <VelButton type="primary" click={handleClick}>重置为默认</VelButton> </div> </div> ) }
|