反应：孩子点击改变父母的状态以重新渲染

Posted 2023-02-23

【中文标题】反应：孩子点击改变父母的状态以重新渲染

【英文标题】：React: Children onclick to change parent's state for re-rendering

【发布时间】：2016-12-18 02:20:07

【问题描述】：

我对 react 很陌生。我试图让父母根据状态更改显示的页面。我的子组件中有一个按钮，它应该向父组件发送“true”或“false”，以便它知道是否渲染它。我认为应该用这样的道具来完成：

this.state = 
   btnNewScreen: this.props.btnNewScreen //true or false
;

但我没有让它工作。你能给点建议吗？这是完整的父母 - 孩子

父级 - maindisplay.js

import React from 'react';
import Mainpage_Addscreen from '../components/subcomponents/mainpage-addscreen';
import Mainpage_Showscreens from '../components/subcomponents/mainpage-showscreens';
//
class MainDisplay extends React.Component 
    constructor() 
        super();
        this.state = 
            btnNewScreen: false //should be this.props.btnNewScreen?
        ;
    

    render() 
        var renderThis;
        if (!this.state.btnNewScreen) 
            renderThis =
                <div>
                    <Mainpage_Addscreen />
                    <Mainpage_Showscreens />
                </div>
        
        else 
            //renderThis = <AddScreen />
            renderThis =
                <div>
                    <Mainpage_Addscreen />
                    <h3>Change to this when true (button click)</h3>
                </div>
        
        return (
            <div>
                renderThis
            </div>
        );
      
    


    export default MainDisplay;

child - mainpage-addscreen.js

import React from 'react';

import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import Button from 'react-bootstrap/lib/Button';

class Mainpage_Addscreen extends React.Component 
    constructor() 
        super();
        this.state = 
            btnNewScreen: true
        ;
        this.newScreen = this.newScreen.bind(this);
    

    newScreen(e) 
        this.setState( btnNewScreen: !this.state.btnNewScreen );
        console.log(this.state.btnNewScreen);
    
    render() 
        var text = this.state.btnNewScreen ? 'Add new' : 'Screens';
        return (
            <div className="main_window col-sm-offset-1 col-sm-10">
                <h3 id="addscreens">Screens: </h3>
                <Button id="addScreen" className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" onClick=this.newScreen><Glyphicon id="refresh_screens" glyph="plus" />&nbsp; text</Button>
            </div>
        );
    



export default Mainpage_Addscreen;

【参考方案1】：

您需要做的是从父级向子级传递一个方法，当单击按钮时它可以调用。这个属于父类的方法会改变状态。 在 MainPage.js 中

changeButtonState(event) 
    this.setState(btnNewScreen: !this.state.btnNewScreen)

将此方法传递给您的子组件

<Mainpage_Addscreen buttonClick=this.changeButtonState.bind(this) />

最后在子组件中，

<Button ....   onClick=this.props.buttonClick />

【参考方案2】：

您可能需要一个回调函数，您的父母将其作为道具传递给您的孩子，然后您的孩子可以调用它。

类似这样的：

// In parent
constructor() 
  ...
  this.onChildClicked = this.onChildClicked.bind(this);


onChildClicked() 
  this.setState(childWasClicked : True );


render() 
  ...
  return (
    <div>
      <Child onClicked=this.onChildClicked />
    </div>
  )


// In child
render() 
  ...
  return (
    <div>
      <button onClick=this.props.onClicked />
    </div>
  )

PS：我注意到你有一个大写的<Button> 组件。这通常适用于您自己定义的组件。标准 DOM 元素采用小写字母，例如<div>、<p>等

【讨论】：

他们特别有一个 因为他们正在从 react-bootstrap 导入引导按钮组件。

我认为您不需要onChildClicked() 上的括号，对吗？

我相信这应该是： // In parent onChildClicked() this.setState(childWasClicked : True ); render() ... return ( ) // 在子 render() ... return ( )

感谢 cmets @Ray_Poly。编辑了答案；）