英文:
How to use seState from child component?
问题
在这种情况下，如何从子组件中使用setDisabled？
const ChildButton = () => {
const [disabled, setDisabled] = useState(false);
return <div onClick={disabled ? null : console.log('do something')} />;
}
从ChildButton组件中导出：
import ChildButton from './ChildButton';
在Parent组件中，你可以这样使用setDisabled来控制子组件的状态并重新渲染子组件：
const Parent = () => {
const controllSetStateFun = () => {
// 使用子组件的setDisabled函数，然后可以从Parent中重新渲染子组件
};
return (
<div>
<ChildButton />
</div>
);
}
英文:
In the case, how to use setDisabled from child component ?
const ChildButton = () => {
const [disabled, setDisabled] = useState(false);
return <div onClick={disabled ? null : console.log('do something')} />
}
import ChildButton from './ChildButton';
const Parent = () => {
const controllSetStateFun = () => {
// use the child coomponent setDisabled then I can re-render child component from Parent
};
return (
<div>
<ChildButton />
</div>
);
}
答案1
得分: 1
你需要将状态提升
- 在父组件中获取你的状态。
- 将设置状态的函数作为属性传递给子组件。
- 在子组件中调用setState函数。
const Parent = () => {
const [disabled, setDisabled] = useState(false);
const controlSetStateFun = () => {
// 使用子组件的setDisabled函数，以便可以从父组件重新渲染子组件
};
return (
<div>
<ChildButton disabled={disabled} setDisabled={setDisabled} />
</div>
);
}
const ChildButton = ({ disabled, setDisabled }) => {
// 你可以从这里访问setDisable
// ...
return <div onClick={disabled ? null : console.log('做某事')} />;
}
英文:
You need to lift the state up
-
Take your state in the parent component.
-
Pass the set state function
as a prop to the child component. -
Call the setState function from
the child component.const Parent = () => {
const [disabled, setDisabled] = useState(false);const controllSetStateFun = () => {
// use the child coomponent setDisabled then I can re-render child component from Parent
};return (
<div>
<ChildButton disabled={disabled} setDisabled={setDisabled} />
</div>
);
}const ChildButton = ({disabled,setDisabled}) => {
//you can access setDisable from here
...
return <div onClick={disabled ? null : console.log('do something')} />
}
答案2
得分: 1
你可以通过传递props来实现这一点。
const ChildButton = ({ disabled, setDisabled }) => {
return <div onClick={disabled ? null : console.log('做一些事情')} />;
}
const Parent = () => {
const [disabled, setDisabled] = useState(false);
const controllSetStateFun = () => {
// 使用子组件的setDisabled函数，然后我可以从父组件重新渲染子组件
};
return (
<div>
<ChildButton disabled={disabled} setDisabled={setDisabled} />
</div>
);
}
英文:
you can do this by passing the props also
const ChildButton = ({disabled, setDisabled}) => {
return <div onClick={disabled ? null : console.log('do something')} />
}
const Parent = () => {
const [disabled, setDisabled] = useState(false);
const controllSetStateFun = () => {
// use the child coomponent setDisabled then I can re-render child component from Parent
};
return (
<div>
<ChildButton disabled={disabled} setDisabled={setDisabled}/>
</div>
);
}
答案3
得分: 1
请定义父组件中的状态，并从子组件中进行更新。
const Parent = () => {
const [disabled, setDisabled] = useState(false);
const controlSetStateFun = () => {
// 使用子组件的 setDisabled 函数，然后我可以从父组件重新渲染子组件
};
return (
<div>
<ChildButton visibility={disabled} visibilityfunction={setDisabled} />
</div>
);
}
const ChildButton = (props) => {
return <div onClick={props.visibilityfunction} />;
}
英文:
Please Define the state in Parent Component and update from the child.
const Parent = () => {
const [disabled, setDisabled] = useState(false)
const controllSetStateFun = () => {
// use the child coomponent setDisabled then I can re-render child component from Parent
};
return (
<div>
<ChildButton visibility ={disbales} visibilityfunction ={setDisabled} />
</div>
);
}
const ChildButton = (props) => {
return <div onClick={props.visibilityfunction} />
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论