我在Reactjs中使用类组件,我想通过父组件中的一个函数来设置子组件的状态,怎么做?

sauutmhj  于 2023-04-05  发布在  React
关注(0)|答案(3)|浏览(101)

所以基本上,我在我的父组件中有一个删除按钮,每当我点击该按钮时,应该调用一些函数来更改或重置子组件的状态变量。我无法在这里想到解决方案。我基本上是一个Java开发人员,但现在必须处理一些涉及React的前端工作。任何帮助都将不胜感激!
在这里想不出办法。

58wvjzkj

58wvjzkj1#

你应该学习更多关于React的基础知识。
这里有一个例子:

const ChildComponent = (props) => {

const {onButtonClick} = props

  return (
    <button onClick={onButtonClick}>Set to false</button>
  
  )

}

const Parent = () => {
  const [booleanButton,setBooleanButton] = useState(false)

  const onButtonClick = () => setBooleanButton(!booleanButton)

  return (
    <>
      <ChildComponent onButtonClick={onButtonClick}/>
    </>
  )

}

如果你的状态管理会更复杂,你需要从不同的组件,甚至不同的组件树中访问值,你应该使用React contextRedux
这里有一个Codesandbox example

zphenhs4

zphenhs42#

您可以将状态从子组件提升到父组件,并将所需的父状态作为属性传递给子组件。
您可以在这里阅读更多信息:https://legacy.reactjs.org/docs/lifting-state-up.html

5f0d552i

5f0d552i3#

就像上面提到的另一个答案一样,你需要在父组件中“提升”状态,并让它更新它。状态可以作为一个 prop 传递给子组件。
下面是一个使用类组件的示例:

import { Component } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    // Store the state in the parent component
    this.state = {
      foo: [1, 2, 3],
    };
  }

  handleDelete() {
    this.setState({ foo: [] });
  }

  render() {
    return (
      <div>
        // Pass it to the child component as a prop
        <Child foo={this.state.foo} />
        <button onClick={this.handleDelete.bind(this)}>Delete</button>
      </div>
    );
  }
}

export class Child extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.foo}</div>;
  }
}

相关问题