单击按钮后功能不起作用答案

【问题标题】：Function is not working upon click of the button单击按钮后功能不起作用
【发布时间】：2021-02-08 20:20:08
【问题描述】：

我在底部有一个Button 元素。 onPress 不知何故没有呈现我的功能 - 'barCharts' - 我想知道为什么它没有在点击时显示组件。我正在使用 react-native paper 库中的按钮。

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;

【问题讨论】：

标签： javascript html react-native charts jsx

【解决方案1】：

您正在渲染按钮内的整个组件 - 这将无法显示。你实际上打算做的更像是

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}

这将确保在单击按钮时显示条形图。

编辑：添加一些关于如何更改条形图组件的信息 - 目前它是一个功能。我怀疑你将不得不渲染一个 jsx 元素。

【讨论】：