Javascript 如何在没有回调函数的情况下使用react钩子状态变量?
当我的复选框被选中或取消选中时,需要设置特定的数据。现在我正在状态变量中将checked的值设置为true或false。问题是它没有像setState那样的回调函数,当我在onChange函数中更新它时,它没有及时更新以使下一组数据正确更新。设置newEnhanceableData的属性取决于复选框是否选中。如何及时更新选中的属性,以便下一行newEnhanceableData更新其属性 以下是状态变量:Javascript 如何在没有回调函数的情况下使用react钩子状态变量?,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,当我的复选框被选中或取消选中时,需要设置特定的数据。现在我正在状态变量中将checked的值设置为true或false。问题是它没有像setState那样的回调函数,当我在onChange函数中更新它时,它没有及时更新以使下一组数据正确更新。设置newEnhanceableData的属性取决于复选框是否选中。如何及时更新选中的属性,以便下一行newEnhanceableData更新其属性 以下是状态变量: const [checkbox, setCheckbox] = useState({che
const [checkbox, setCheckbox] = useState({checked: true});
const [enhanceableData, setEnhanceableData] = useState({
name: 'Item Clicked',
properties: {
...defaultProps,
activityLocation: 'Member - RAQ Contact Details',
autopopulated: true,
changeType: 'Add'
}
});
下面是我更新它们的地方:
<input
id='raq-sms-text-checkbox'
type='checkbox'
defaultChecked={true}
style={{marginRight: 5}}
onChange={() => {
setCheckbox({checked: !checkbox.checked});
const newEnhanceableData = enhanceableData;
newEnhanceableData.properties.changeType = checkbox.checked ? 'Add' : 'Remove';
newEnhanceableData.properties.autopopulated = false;
setEnhanceableData(newEnhanceableData)
console.log('checkbox: ', checkbox)
console.log('enhanceableData: ', enhanceableData)
sendEnhancedTrackEvent(enhanceableData);
}} />
{
setCheckbox({checked:!checkbox.checked});
const newEnhanceableData=enhanceableData;
newEnhanceableData.properties.changeType=checkbox.checked?'Add':'Remove';
newEnhanceableData.properties.autopopulated=false;
setEnhanceableData(newEnhanceableData)
console.log('复选框:',复选框)
log('enhanceableData:',enhanceableData)
sendEnhancedTrackEvent(enhanceableData);
}} />
如您所见,已设置enhanceableData后,checked属性将更新:
您可能根本不需要挂钩,只需检查onChange函数中的checked状态:
<label>
<input
type="checkbox"
onChange={ev => {
const { checked } = ev.currentTarget;
console.log(checked) // toggles to true and false
// continue with the rest
}}
/>
Click me
</label>
{
const{checked}=ev.currentTarget;
console.log(选中)//切换为true和false
//其余的继续
}}
/>
点击我
如果要将逻辑移到其他地方,useEffect可能会很有用:
const [checked, setChecked] = useState(true);
useEffect(() => {
// do-enhanced-computing-stuff-here
}, [checkbox]) // <-- effect only runs if checkbox boolean state changes
<input checked={checked} onChange={ev => setChecked(ev.currentTarget.checked)} />
const[checked,setChecked]=useState(true);
useffect(()=>{
//在这里做增强型计算
},[复选框]//
简单的事情:)