Javascript 在reactjs中执行onclick事件_Javascript_Node.js_Reactjs_React Native

Javascript 在reactjs中执行onclick事件

javascript node.js reactjs react-native

Javascript 在reactjs中执行onclick事件,javascript,node.js,reactjs,react-native,Javascript,Node.js,Reactjs,React Native,我正在尝试使用reactjs制作一个应用程序。下面是我的主app.js中的代码： class App extends Component { return ( <div> <ExampleTable header={() => <TopBar/>} /> <AddExampleModal/>

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

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

类应用程序扩展组件{
返回(
}
/>
)
}
}

其中Top-Bat、addexamplemodel、chartmodel和CompatibilityAlert是从其他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-chartmodel扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
console.log（'ok'）}
onCancel={（）=>console.log（'cancel'）}
可见={true}
okText={'ok'}
cancelText={'cancel'}
confirmLoading={false}
title=“意向分布图”
>
你好
)
}
}

顶栏包含：

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

class TopBar扩展组件{
渲染{
返回(
changechartshow（）}
>
显示图形
)
}
}

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

您可以在

应用程序

组件中添加状态，并通过

处理程序

从

顶部栏

组件更新状态。基于此状态，您可以切换

chartmodel

的可见性

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

类应用程序扩展组件{
状态={
可见：正确
}
切换可见性=（）=>{
this.setState（prevState=>（{isVisible:！prevState.isVisible}））
}
返回(
}
/>
有关详细说明
您可以在应用程序
组件中添加状态，并通过处理程序
从顶栏
组件更新状态。基于此状态，您可以切换图表模式
的可见性
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>
    )
  }
}

类应用程序扩展组件{
状态={
可见：正确
}
切换可见性=（）=>{
this.setState（prevState=>（{isVisible:！prevState.isVisible}））
}
返回(
}
/>
有关详细说明，请参见应用程序
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>
        );
    }
}

类应用程序扩展组件{
构造函数（）{
此.state={
可见：正确
}
}
toggleVisibility=（）=>this.setState（{isVisible:！this.state.isVisible}）
渲染（）{
const{isVisible}=this.state；
返回(
}
);
}
}

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

class TopBar扩展组件{
渲染{
返回(
this.props.toggleVisibility（）}
>
显示图形
)
}
}

ChartModal-将状态传递给visible属性
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>
    )
  }
}

class-chartmodel扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
console.log（'ok'）}
onCancel={（）=>console.log（'cancel'）}
可见={this.props.isVisible}
okText={'ok'}
cancelText={'cancel'}
confirmLoading={false}
title=“意向分布图”
>
你好
)
}
}
应用程序
类应用程序扩展组件{
构造函数（）{
此.state={
可见：正确
}
}
toggleVisibility=（）=>this.setState（{isVisible:！this.state.isVisible}）
渲染（）{
const{isVisible}=this.state；
返回(
}
);
}
}

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

class TopBar扩展组件{
渲染{
返回(
this.props.toggleVisibility（）}
>
显示图形
)
}
}

ChartModal-将状态传递给visible属性
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>
    )
  }
}

class-chartmodel扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
console.log（'ok'）}
onCancel={（）=>console.log（'cancel'）}
可见={this.props.isVisible}
okText={'ok'}
cancelText={'cancel'}
confirmLoading={false}
title=“意向分布图”
>
你好
)
}
}
topbar如何知道togglevisibility函数。因为我们没有传递函数以便使用道具接收？哦，抱歉，无论如何，感谢编辑，但不确定您是否需要绑定togglevisibility函数，因为它是一个箭头函数topbar如何知道togglevisibility函数。因为我们不是传递函数以便我们可以使用道具接收？哦，抱歉，无论如何，感谢您的编辑，但不确定您是否需要绑定toggleVisibility函数，因为它是一个箭头函数