反应 UseState 流

Question

在 useStates 中，通常要设置颜色，您必须执行 setSelected(selected) 才能使用该反应钩子，但从未像下面那样使用它：如何使用 setSelected 以便它可以更改颜色？

>

onSelectedChange 是一个与 setSelected 函数相等的函数吗？一个函数接收另一个函数？

 App.js
    const options =[
        {
            label:'The color red',
            value:'red'
        },
        {
            label:'The color blue',
            value:'blue'
        },
        {
            label:'The color green',
            value:'green'
        }
    ];
    export default () => {
        const [selected, setSelected]=useState(options[0]);
        return (
            <div>
                <Dropdown 
                selected={selected}
                onSelectedChange={setSelected}
                options = {options}/>
            </div>
        );
    };

---

Dropdown.js
import React from 'react';
const Dropdown = ({options,selected, onSelectedChange})=>{
    const renderedOptions = options.map((option)=>{
        return (
            <div key = {option.value}
                className="item"
                onClick={()=>onSelectedChange(option)}
                >
                    {option.label}
            </div>
        )
    });
    return (
        <div className="ui form">
            <div className="field">
                <label className="label">Select a color</label>
                <div className="ui selection dropdown visible active">
                    <i className="dropdown icon"></i>
                    <div className="text">{selected.label}</div>
                    <div className="menu visible transition">
                        {renderedOptions}
                    </div>
                </div>
            </div>
        </div>
    );
};

Answer 1

它作为 <Dropdown> 属性传递给 onSelectedChange 组件

        <Dropdown 
            selected={selected}
            onSelectedChange={setSelected}
            options = {options}/>

然后从 onClick 处理程序 onClick={()=>onSelectedChange(option)

调用