如何从子组件使用 setState？

Question

在这种情况下，如何从子组件使用setDisabled？

const ChildButton = () => {
  const [disabled, setDisabled] = useState(false);

  return <div onClick={disabled ? null : console.log('do something')} />
}

从 './ChildButton' 导入 ChildButton；

const Parent = () => {

  const controllSetStateFun = () => {
    // use the child coomponent setDisabled then I can re-render child component from Parent
  };

  return (
    <div>
     <ChildButton />
    </div>
  );
}

Answer 1

你需要lift the state up

1. 在父组件中获取您的状态。

2. 传递设置状态函数 作为子组件的道具。

3. 调用 setState 函数 子组件。

   const Parent = () => { const [禁用，setDisabled] = useState(false);

   const controllSetStateFun = () => { // 使用子组件 setDisabled 然后我可以从 Parent 重新渲染子组件 };

   返回 （ ); }

   const ChildButton = ({disabled,setDisabled}) => { //你可以从这里访问setDisable ... 返回 <div onClick={已禁用？ null : console.log('做某事')} /> }

Answer 2

你也可以通过传递道具来做到这一点

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>
  );
}

Answer 3

请在父组件中定义状态并从子组件更新。

const Parent = () => {
const [disabled, setDisabled] = useState(fals
  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} />
}

Answer 4

你可以看看useImperativeHandle：

function Component(props, ref) {
  const [disabled, setDisabled] = useState(false);

  React.useImperativeHandle(ref, () => ({
    method: () => {
      setDisabled(true);
    },
  }));
  return <div onClick={disabled ? null : console.log('do something')} />;
}
Component = React.forwardRef(Component);

在此示例中，呈现 <Component ref={myRef} /> 的父组件将能够调用 myRef.current.method().

也可以按照其他答案中的建议提升状态，取决于哪个更适合您。