首页 > 解决方案 > 类之间的 React props

问题描述

我正在做一个react项目,我正在使用不同的类。

我会将一个数值带入另一个类的道具中,但它不起作用。

   const [refreshRate, setRefreshRate] = useState(60);

    function changeRefreshRate(e) {
        setRefreshRate(e.target.value);
    }
    
    let list = [
        {
            id:'weather',
            label:'Weather',
            widget:<Weather refreshRate={refreshRate}/>, //not update
            checked: false
        }
    ];

console.log(refreshRate)
    return(
        <div>
            <DragDropContext onDragEnd={handleOnDragEnd}>
                <Droppable droppableId="widgets">
                {(provided) => (
                    <ul className="widgets" {...provided.droppableProps} ref={provided.innerRef}>
                        {widgets.map(({id, label, widget, checked}, index) => {
                            return (
                                <Draggable key={id} draggableId={id} index={index}>
                                {(provided) => (
                                    <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                        <Checkbox id={id} label={label} onChange={_onBoxChecked} />
                                        {checked ? widget : ""}
                                        <div>
                                            <input class="boxnbr" type='number' min='0' onChange={changeRefreshRate}></input> 

在我的Weather课堂上,无论如何我都会收到 60 分。即使我改变了RefreshRate它也不会发送。但是,在我这个类的控制台日志中,我可以得到很好的输入。所以,我的setRefreshRate作品。这怎么可能 ?

标签: javascriptreactjs

解决方案


您可以将初始状态作为第一个参数传递给 useState,如下所示:

const Weather = (props) => {
       const [refreshRate, setRefreshRate] = useState(props.parentRefreshRate);
       ...
}

其中 parentRefreshRate 是您将从父类发送的道具值。


推荐阅读