在 ReactJS 中执行 onClick 事件

Question

我正在尝试使用 reactjs 制作应用程序.下面是我的主应用程序中存在的代码.js：

class App extends Component {
    return (
        <div>
            <ExampleTable
                header={() => <TopBar/>}
            />
            <AddExampleModal/>
            <ChartModal/>
            <CompatibilityAlert/>
        </div>
    )
  }
}

其中Top Bat，AddExampleModal，ChartModal和Compatibility Alert是从其他js文件加载的。

图表模式包含：

class ChartModal extends Component{
constructor(props){
    super(props)
}
render(){
    return(
        <Modal
            onOk={()=>console.log('ok')}
            onCancel={()=>console.log('cancel')}
            visible={true}
            okText={'ok'}
            cancelText={'cancel'}
            confirmLoading={false}
            title="Intent distribution chart"
        >
            <h1>HOWDY</h1>
            <TreeMap
                data={chartData}
                width={400}
                valueUnit={'count'}
            />
        </Modal>
    )
  }
}

顶栏包含：

class TopBar extends Component {
    render{
            return (
            <Button
                style={styles.button}
                type='primary'
               // onClick={() => changechartshow()}
            >
                Show Graph
            </Button>
           )
         }
      }

问题是在应用程序文件中，我想使用顶栏中的按钮切换图表模式的可见性。

Answer 1

应用程序

class App extends Component {
    constructor() {
        this.state = {
          isVisible: true
        }
    }
    toggleVisibility = () => this.setState({isVisible: !this.state.isVisible})
    render () {
        const {isVisible} = this.state;
        return (
            <div>
                <ExampleTable
                    header={() => <TopBar toggleVisibility =
                                {this.toggleVisibility.bind(this)}
                          />}
                <AddExampleModal/>
                <ChartModal isVisible={isVisible}/>
                <CompatibilityAlert/>
            </div>
        );
    }
}

顶栏

class TopBar extends Component {
    render{
        return (
        <Button
            style={styles.button}
            type='primary'
            onClick={() => this.props.toggleVisibility()}
        >
            Show Graph
        </Button>
       )
     }
  }

图表模态 - 将状态传递给可见属性

class ChartModal extends Component{
constructor(props){
    super(props)
}
render(){
    return(
        <Modal
            onOk={()=>console.log('ok')}
            onCancel={()=>console.log('cancel')}
            visible={this.props.isVisible}
            okText={'ok'}
            cancelText={'cancel'}
            confirmLoading={false}
            title="Intent distribution chart"
        >
            <h1>HOWDY</h1>
            <TreeMap
                data={chartData}
                width={400}
                valueUnit={'count'}
            />
        </Modal>
    )
  }
}

Answer 2

您可以在

App组件中添加状态，并传递handler以从TopBar组件更新状态。根据此状态，您可以切换ChartModal的可见性。

class App extends Component {
    state = {
      isVisible: true
    }
    toggleVisibility = () => {
       this.setState(prevState => ({isVisible: !prevState.isVisible}))
    }
    return (
        <div>
            <ExampleTable
                header={() => <TopBar toggleVisibility={this.toggleVisibility}/>}
            />
            <AddExampleModal/>
            {this.state.isVisible ? <ChartModal/>: null }
            <CompatibilityAlert/>
        </div>
    )
  }
}

现在在您的顶部栏中，您将调用此函数为

class TopBar extends Component {
    render{
        return (
        <Button
            style={styles.button}
            type='primary'
            onClick={() => this.props.toggleVisibility()}
        >
            Show Graph
        </Button>
       )
     }
  }

阅读 React 文档