所以基本上,我在我的父组件中有一个删除按钮,每当我点击该按钮时,应该调用一些函数来更改或重置子组件的状态变量。我无法在这里想到解决方案。我基本上是一个Java开发人员,但现在必须处理一些涉及React的前端工作。任何帮助都将不胜感激!在这里想不出办法。
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 context或Redux。这里有一个Codesandbox example
zphenhs42#
您可以将状态从子组件提升到父组件,并将所需的父状态作为属性传递给子组件。您可以在这里阅读更多信息:https://legacy.reactjs.org/docs/lifting-state-up.html
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>; } }
3条答案
按热度按时间58wvjzkj1#
你应该学习更多关于React的基础知识。
这里有一个例子:
如果你的状态管理会更复杂,你需要从不同的组件,甚至不同的组件树中访问值,你应该使用React context或Redux。
这里有一个Codesandbox example
zphenhs42#
您可以将状态从子组件提升到父组件,并将所需的父状态作为属性传递给子组件。
您可以在这里阅读更多信息:https://legacy.reactjs.org/docs/lifting-state-up.html
5f0d552i3#
就像上面提到的另一个答案一样,你需要在父组件中“提升”状态,并让它更新它。状态可以作为一个 prop 传递给子组件。
下面是一个使用类组件的示例: