从父组件改变子组件的状态

状态应在父组件中进行管理。可以通过添加属性将 open值传递给子组件。

class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};


this.toggleChildMenu = this.toggleChildMenu.bind(this);
}


toggleChildMenu() {
this.setState(state => ({
open: !state.open
}));
}


render() {
return (
<div>
<button onClick={this.toggleChildMenu}>
Toggle Menu from Parent
</button>
<ChildComponent open={this.state.open} />
</div>
);
}
}


class ChildComponent extends Component {
render() {
return (
<Drawer open={this.props.open}/>
);
}
}

上面的答案对我来说是部分正确的，但是在我的场景中，我想将值设置为一个状态，因为我已经使用该值来显示/切换一个模态。所以我使用了如下。希望能帮到别人。

class Child extends React.Component {
state = {
visible:false
};


handleCancel = (e) => {
e.preventDefault();
this.setState({ visible: false });
};


componentDidMount() {
this.props.onRef(this)
}


componentWillUnmount() {
this.props.onRef(undefined)
}


method() {
this.setState({ visible: true });
}


render() {
return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
{"Content"}
</Modal>)
}
}


class Parent extends React.Component {
onClick = () => {
this.child.method() // do stuff
}
render() {
return (
<div>
<Child onRef={ref => (this.child = ref)} />
<button onClick={this.onClick}>Child.method()</button>
</div>
);
}
}

参考资料 -https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

父组件可以管理子状态，将一个道具传递给子组件，子组件使用 Component entWillReceiveProps 将该道具转换为状态。

class ParentComponent extends Component {
state = { drawerOpen: false }
toggleChildMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen })
}
render() {
return (
<div>
<button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
<ChildComponent drawerOpen={this.state.drawerOpen} />
</div>
)
}
}


class ChildComponent extends Component {
constructor(props) {
super(props)
this.state = {
open: false
}
}


componentWillReceiveProps(props) {
this.setState({ open: props.drawerOpen })
}


toggleMenu() {
this.setState({
open: !this.state.open
})
}


render() {
return <Drawer open={this.state.open} />
}
}

您可以从父组件发送一个道具，并在子组件中使用它，这样就可以根据发送的道具更改对子组件的状态更改进行更改，并且可以通过在子组件中使用 来自道具来处理这个问题。

您可以使用 createRef从父组件更改子组件的状态。这是所有的步骤。

1. 创建一个方法来更改子组件中的状态。
2. 使用 React.createRef()为父组件中的子组件创建引用。
3. 使用 ref={}附加子组件的引用。
4. 使用 this.yor-reference.current.method调用子组件方法。

父组件

class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
render() {
return (
<div>
<button onClick={this.changeChild.current.toggleMenu()}>
Toggle Menu from Parent
</button>
<ChildComponent ref={this.changeChild} />
</div>
);
}
}

子组件

class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
open: false;
}
}


toggleMenu=() => {
this.setState({
open: !this.state.open
});
}


render() {
return (
<Drawer open={this.state.open}/>
);
}
}

如果您使用的是功能性组件，则可以通过以下方法实现:

const ParentComponent = () => {
const [isOpen, setIsOpen] = useState(false)


toggleChildMenu() {
setIsOpen(prevValue => !prevValue)
}


return (
<div>
<button onClick={toggleChildMenu}>
Toggle Menu from Parent
</button>
<Child open={isOpen} />
</div>
);
}






const Child = ({open}) => {
return (
<Drawer open={open}/>
);
}

这是我昨天试过的另一种方法

在子脚本中，定义父组件和常规组件可用的方法

var ChildStateModificationFunc;
const Child = ()=>{
const [someState, setSomeState] = useState();


//define the state that you want to modify
ChildStateModificationFunc = (modVal)=>{
setSomeState(modVal)
}


return (
<div>
{/* your child jsx here */}
</div>
}


//export both the child and the method
export default Child;
export {ChildStateModificationFunc}

在父脚本中，导入这两个项

    import Child, {ChildStatteModificationFunc} from 'Child.js'


const Parent = ()=>{


var newVal = 'some parent val'  //let say you just fetch this from some web api
//share the newVal with Child component
ChildStatteModificationFunc(newVal)


return(
<div>
<Child />
</div>)