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

Question

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

想不出办法来。

Answer 1

你应该学习更多关于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上下文或Redux。

下面是一个Codesandbox示例

Answer 2

就像前面提到的另一个答案一样，你需要"提升"。在父组件中的状态，并让它更新它。状态可以作为道具传递给子组件。

下面是一个使用类组件的例子:

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

Answer 3

你可以将状态从子组件提升到父组件，并将所需的父组件状态作为prop传递给子组件。

你可以在这里阅读更多内容:https://legacy.reactjs.org/docs/lifting-state-up.html