Reactjs 反应：子项单击以更改父项'；用于重新渲染的状态

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

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

// 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>
  )
}

但我不能让它工作。你能给点建议吗？这是完整的父子关系

父-mainplay.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;

从“React”导入React；
从“../components/subcomponents/Mainpage Addscreen”导入Mainpage_Addscreen；
从“../components/subcomponents/Mainpage Showscreens”导入Mainpage_Showscreens；
//
类MainDisplay扩展了React.Component{
构造函数（）{
超级（）；
此.state={
btnewscreen:false//是否应为this.props.btnewscreen？
};
}
render（）{
变分渲染；
如果（！this.state.btnNewScreen）{
渲染=
}
否则{
//renderThis=
渲染=
当为true时更改为该值（单击按钮）
}
返回(
{renderThis}
);
}
}
导出默认主显示；

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;

从“React”导入React；
从“react bootstrap/lib/Glyphicon”导入Glyphicon；
从“react bootstrap/lib/Button”导入按钮；
类Mainpage\u Addscreen扩展React.Component{
构造函数（）{
超级（）；
此.state={
btnewscreen：正确
};
this.newScreen=this.newScreen.bind（this）；
}
新闻屏幕（e）{
this.setState（{btnNewScreen:！this.state.btnNewScreen}）；
console.log（this.state.btnNewScreen）；
}
render（）{
var text=this.state.btnNewScreen？'addnew'：'Screens'；
返回(
屏幕：
{text}
);
}
}
导出默认主页面\添加屏幕；

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

大概是这样的：

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

// 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>
  )
}

//在父级中
构造函数（）{
...
this.onChildClicked=this.onChildClicked.bind（this）；
}
onChildClicked（）{
this.setState（{childWasClicked:True}）；
}
render（）{
...
返回(
)
}
//在儿童时期
render（）{
...
返回(
)
}

---

PS：我注意到您有一个大写的

组件。这通常适用于您自己定义的组件。标准DOM元素采用小写形式，例如，

，

等

您需要做的是将方法从父级传递给子级，单击按钮时可以调用该方法。此属于父级的方法将更改状态。
在MainPage.js中

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

将此方法作为子组件传递给子组件

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

最后在子组件中

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

这有助于我更好地理解它，并使它发挥作用。谢谢他们特别有一个，因为他们正在从react bootstrap导入引导按钮组件。我认为您不需要

onChildClicked（）

上的括号，是吗？我相信这应该是：//在父onChildClicked（）{this.setState（{childWasClicked:True}）；}render（）{…return（）}//在child render（）{…return（）}感谢@Ray_Poly的评论。编辑答案；）