React：状态未使用 HTML 颜色选择器正确更新

大佬教程收集整理的这篇文章主要介绍了React：状态未使用 HTML 颜色选择器正确更新，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React：状态未使用 HTML 颜色选择器正确更新？

开发过程中遇到React：状态未使用 HTML 颜色选择器正确更新的问题如何解决？下面主要结合日常开发的经验，给出你关于React：状态未使用 HTML 颜色选择器正确更新的解决方法建议，希望对你解决React：状态未使用 HTML 颜色选择器正确更新有所启发或帮助；

我正在尝试实现一个颜色选择器，它将更新组件的状态，但目前它的行为相当奇怪。当我点击颜色选择器，然后首先选择一种颜色时，状态会更新，但当我在颜色选择器轮上滑动光标时状态不会持续更新。

目前我想要的只是根据颜色选择器轮中当前选择的颜色来更改页面中的文本，但我无法让它工作。

new-virus.component.Jsx

    const NewVirusPage = () => {
        const [values,SETVALues] = useState(
            {
                priMary: "#000002",secondary: "#000002",size : 10,lethality: 10,availableVaccine: true,}
            )

        // Labels for each step under the stepper.
        const getSteps = () => {
            return ['Colours','Size','Lethality','Available vaccine?'];
        }

        //   Content to be displayed below the stepper at each step.
        const getStepContent = step => {
            return ['Choose priMary & secondary colours for the virus.','SlIDe to set the size of the virus.','Choose the lethality of the virus.','Would you like a vaccine to be available for the virus?'][step];
        }

        const VirusColourPicker = () => {

            const handleChange = (e,typE) => {
                const { value } = e.target;
                console.log(value)
                SETVALues(prevstate => ({
                    ...prevstate,[type]: value
                }));
            };

            return(
                <div classname = 'virus-colour-picker'>
                    <ColourPicker type = "priMary" value = {values.priMary} onChange = {handleChangE} label = "PriMary colour"/>
                    <ColourPicker type = "secondary" value = {values.secondary} onChange = {handleChangE} label = "Secondary colour"/>
                </div>
            )
        }
        // input component that is rendered under the stepper at each step.
        const getStepinput = step => {
            return [<VirusColourPicker/>,'2','3','4'][step];
        }

        return (
            <div>
            <div classname = "virus-model-container">
                Insert thE interactive model of the virus here.
                {values.priMary}
                {values.secondary}
            </div>
            <CustomizedSteppers
                getSteps = {getSteps}
                getStepContent = {getStepContent}
                getStepinput = {getStepinput}
            />
            </div>
        )
    }

    export default NewVirusPage;

color-picker.component.Jsx

    const colourPicker = ({ label,onChange,value,type }) => {
        return (
            <div>
                <p>{label}</p>
                <input onChange = {event => onChange(event,typE)} value={value} type = 'color'></input>
            </div>
        )
    }

    export default ColourPicker;

我尝试将其更改为类组件，但它也不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

大佬总结

以上是大佬教程为你收集整理的React：状态未使用 HTML 颜色选择器正确更新全部内容，希望文章能够帮你解决React：状态未使用 HTML 颜色选择器正确更新所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。