REACT-HOOKS:我如何存储由用户修改的参数?



我有复选框,我想在useState钩子中保存由用户修改的值。默认情况下,当前状态是固定的,如果my_value === 1, elif 0 unfilled,则复选框被填充。但是如果我的用户决定取消选中它,我该如何存储这个操作呢?(如果未选中,值为0)。

与下拉菜单相同,默认值是固定的。用户可以修改Taste(Good/Medium/Bad)或Comments((0/4....4/4))。现在我只得到当前状态。

export default function Display() {
...
//For my checkboxes 
const [availability, setAvailability] = useState(item.values[0].availability)
...
const [trust, setTrust] = useState(item.values[0].trust)
//For my dropdowns 
const [taste, setTaste] = useState(item.taste)
...
const [comments, setComments] = useState(rule.comments)
function Checkbox({ value }) {
const [checked, setChecked] = useState(value);
return (
<label>
<input
type="checkbox"
checked={checked}
onChange={() => setChecked(checked => !checked)}
/>
{value}
</label>
);
}
return (
<div>
<div>
Availability :  <Checkbox value={!!availability} />
</div>
....           
<div > 
Taste : <Dropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} />
</div>
...
</div >
);
}

这与其说是钩子问题,不如说是"我该把状态存储在哪里"的问题。问题。到目前为止,我还没有看到实现中有任何地方可以存储用户选择。MenuItemDisplay组件要么需要维护该状态,要么需要从父组件接收该状态。无论哪种方式,该状态(包含用户选择)都需要(连同更新函数)作为'checked'道具的值传递到复选框组件中,并且该状态的更新函数应该作为复选框'onToggle'(或类似的)道具

传递(并适应)。

最新更新