在reactjs中執行onclick事件

Question

我正在嘗試使用reactjs創建一個應用程序。以下是我的主要app.js中提供的代碼：

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

其中Top Bat，AddExampleModal，ChartModal和CompatibilityAlert是從其他js文件加載的。

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

頂欄包含：

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

關鍵是在應用程序文件中，我想使用頂部欄中的按鈕來切換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>
       )
     }
  }

在此處閱讀關於提升狀態的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>
    )
  }
}