Question

我正在尝试使用reactjs创建一个应用程序.below是我的主app.js中的代码：

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

从其他js文件加载Top Bat，AddExampleModal，ChartModal和CompatibilityAlert。

Chartmodal包含：

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

Topbar包含：

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

问题是，在app文件中，我想使用顶部栏中的按钮切换chartmodal的可见性。

Answer 1

您可以在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>
    )
  }
}

现在，在您的TopBar中，您将此功能称为

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

阅读Lifting the state up上的React文档以获取详细说明

Answer 2

应用

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

ChartModal - 将状态传递给可见属性

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

在reactjs中执行onclick事件

2 个答案: