Javascript 单击按钮后,功能不起作用
我在底部有一个Javascript 单击按钮后,功能不起作用,javascript,html,react-native,charts,jsx,Javascript,Html,React Native,Charts,Jsx,我在底部有一个按钮元素onPress不知何故没有呈现我的函数-“条形图”-我想知道为什么它没有在单击时显示组件。我正在使用react本地纸张库中的按钮 import * as React from 'react'; import { View, StyleSheet, Text } from 'react-native'; import { Button, Menu, Divider, Provider, TextInput } from 'react-native-paper'; import
按钮
元素onPress
不知何故没有呈现我的函数-“条形图”-我想知道为什么它没有在单击时显示组件。我正在使用react本地纸张库中的按钮
import * as React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Button, Menu, Divider, Provider, TextInput } from 'react-native-paper';
import { BarChart, LineChart, Grid } from 'react-native-svg-charts';
import { Colors } from 'react-native/Libraries/NewAppScreen';
const App = () => {
const barCharts = () => {
const fill = 'rgb(134, 65, 244)'
const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
return (
<View style={styles.sectionContainer}>
<BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
<Grid />
</BarChart>
</View>
);
};
const [visible, setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View
style={{
paddingTop: 50,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Menu
visible={visible}
onDismiss={closeMenu}
anchor={<Button onPress={openMenu}>Show menu</Button>}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Divider />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</View>
<View style={styles.sectionContainer}>
<Button onPress={barCharts}>Show barCharts</Button>
</View>
</Provider>
);
};
export default App;
import*as React from'React';
从“react native”导入{View,StyleSheet,Text};
从“react native paper”导入{按钮、菜单、分隔符、提供程序、文本输入};
从“react native svg charts”导入{BarChart、LineChart、Grid};
从'react native/Libraries/NewAppScreen'导入{Colors};
常量应用=()=>{
常量条形图=()=>{
常量填充='rgb(134,65,244)'
常量数据=[50,10,40,95,-4,-24,null,85,未定义,0,35,53,-53,24,50,-20,-80]
返回(
);
};
const[visible,setVisible]=React.useState(false);
常量openMenu=()=>setVisible(true);
const closeMenu=()=>setVisible(false);
返回(
{}title=“第1项”/>
{}title=“第2项”/>
{}title=“第3项”/>
显示条形图
);
};
导出默认应用程序;
您正在渲染按钮内的整个组件-这将无法显示。你实际上打算做的更像
const fill = 'rgb(134, 65, 244)'
const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]
const barCharts = (
<View style={styles.sectionContainer}>
<BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
<Grid />
</BarChart>
</View>
);
<View style={styles.sectionContainer}>
<Button onPress={() => setShowBarCharts(true)}>Show barCharts</Button>
</View>
{showBarCharts && barcharts}
const fill='rgb(134,65,244)'
常量数据=[50,10,40,95,-4,-24,null,85,未定义,0,35,53,-53,24,50,-20,-80]
常数条形图=(
);
setShowBarCharts(true)}>显示条形图
{showBarCharts&&barcharts}
这将确保在单击按钮时显示条形图
编辑:添加一点关于如何更改条形图组件的信息-它是当前的一个函数。我怀疑您将不得不呈现一个jsx元素