Question

所以，我像这样调用这个子组件

<FilterItem filterOption={filterOption} updateFilter={updateFilter} value={filter[filterOption.fieldName]}/>

并使用这些值设置输入标签中的值

<div style={{padding: 5}}>
            <input 
                type={props.filterOption.type} 
                {...props.filterOption.additionalAttr} 
                onChange={(event) => changeFilter(event)} 
                field={props.filterOption.fieldName}
                value={props.filterOption.value}
                checked={props.filterOption.value}
            /> 
            <span>{props.filterOption.label}</span>
</div>

但是一旦设置了值，即使我更改父组件中的值也不会改变。

有没有办法做到这一点？我看到了 this，但作为对 ember 有一定经验的人，我觉得必须有一个简单的解决方案

编辑：-

parent 中的 state 是这样定义的

const [filter, setFilter] = useState({});

并且在这个方法中改变了状态

const updateFilter = (key, value) => {
    var tempFilter = filter;
    tempFilter[key] = value;
    setFilter(tempFilter);
};

这个方法是从子进程调用的

const changeFilter = (event) => {

    var key = event.target.getAttribute("field");
    var value = (() => {
        switch(event.target.type){
            case "checkbox":
                return event.target.checked;
            case "range":
                return event.target.value
        }
    })();
    
    props.updateFilter(key, value)
}

当父组件中的值在 React 中发生变化时更新子组件

0 个答案: