英文:
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} />}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论