从本机另一个页面调用函数

时间:2020-01-28 13:07:06

标签: reactjs react-native

我正在尝试从另一个页面调用一个函数,但是它不起作用。我的方法是,当我按下按钮时,从Message.js调用的函数应将日志返回到我的浏览器。到目前为止,这是我的代码

import React from "react";
import ReactApexChart from "react-apexcharts";

class ApexChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      series: [
        {
          name: "Progress",
          data: [64, 55, 21, 18, 76, 41, 44, 14, 66, 32]
        },
        {
          name: "Expenses (In thousound)",
          data: [53, 32, 42, 22, 29, 80, 16, 49, 78, 11]
        }
      ],

      options: {
        colors: ["#519ca5", "#2274A5"],
        plotOptions: {
          bar: {
            horizontal: true,
            dataLabels: {
              position: "top"
            }
          }
        },
        chart: {
          toolbar: {
            show: false,
          }
        },
        dataLabels: {
          enabled: true,
          offsetX: 0,
          style: {
            fontSize: "12px",
            colors: ["#fff"]
          }
        },
        stroke: {
          show: true,
          width: 1,
          colors: ["#fff"]
        },
        xaxis: {
          //   type: "datetime",
          categories: [
            "Department of Psychology",
            "Department of Natural Science",
            "Department of Environmental Science",
            "Department of Literature And Finance",
            "Department of Foreign Employement",
            "Department of Transport Management",
            "Department of culture media and sport",

          ]
        },
        legend: {
          position: "right",
          markers: {
            width: 24,
            height: 24,
            strokeWidth: 0,
            strokeColor: "#fff",
            fillColors: undefined,
            radius: 2,
            customHTML: undefined,
            onClick: undefined,
            offsetX: 0,
            offsetY: 0
          }
        }
      }
    };
  }

  componentDidMount() {
    fetch("http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly")
      .then(res => res.json())
      .then(res => console.log(res));
    this.setState({
      options: { ...this.state.options }
    });
  }

  render() {
    return (
      <div id="chart">
        <ReactApexChart
          height="100%"
          options={this.state.options}
          series={this.state.series}
          type="bar"
        />
      </div>
    );
  }
}

export default ApexChart;

1 个答案:

答案 0 :(得分:0)

您应该将this.message更改为message();

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import {message} from "./Message"

class App extends Component{

 onPress = ()=>{
  this.setState({FromStr: this.state.From})
  this.setState({ToStr: this.state.To})
  message();
 }

 render(){
  return (
   <View style={styles.buttonStyle}>
     <Button
       title={"Press"}
       color="#FFFFFF"
       onPress={this.onPress}
     />
   </View> 
  );
 }
}