Question

我已经创建了表格组件。在这个组件中，我创建了两个按钮。一个是 download，第二个是 share。两者都有 onPress 方法。我已经在仪表板组件中导入了这个表组件。但我无法在仪表板组件中单独使用这两种方法。请针对此问题提出任何解决方案。

表格组件：

import React, { StrictMode, useEffect, useState } from "react";
import { Text, View, ActivityIndicator } from "react-native";
import Size from "../../constants/Sizes";
import Strings from "../../constants/Strings";
import { Table, TableWrapper, Row, Rows } from "react-native-table-component";
import Color from "../../constants/Colors";
import Icon from "../../styles/Icons";
import api from "../../services/api";
import ListModel from "../ListModal";
import { TableTwoStyle as tableStyle } from "../../styles";
import { heightToDp } from "../../constants/Utils";

const TableTwo = (props) => {
  const [files, setFiles] = useState([]);
  const [modalState, setModalState] = useState(false);
  useEffect(() => {
    const fileData = api.getFileOptions();

    setFiles(fileData);
  }, []);
  const { data } = props;

  const handleOptions = (title) => {
    console.log("title", title);
    props.onPress(title);
    // this.closeModal();
  };

  const openModal = () => {
    setModalState(true);
  };
  const closeModal = () => {
    setModalState(false);
  };
  return (
    <StrictMode>
      {data !== undefined ? (
        <View style={tableStyle.mainContainer}>
          <View style={tableStyle.HeadingSection}>
            <View style={tableStyle.LabelContainer}>
              <View style={tableStyle.leftSection}>
                <Text style={tableStyle.labelText}>{Strings.tableTitle}</Text>
              </View>
              <View style={tableStyle.rightSection}>
                <Icon.MaterialIcons
                  name="file-download"
                  color={Color.gray}
                  style={tableStyle.exportButton}
                  size={heightToDp(Size.per_4_5)}
                  onPress={openModal}
                />
              </View>
              <View style={tableStyle.rightSection}>
                <Icon.MaterialIcons
                  name="share"
                  color={Color.info}
                  style={tableStyle.exportButton}
                  size={heightToDp(Size.per_4)}
                  onPress={openModal}
                />
              </View>
            </View>
            <View style={tableStyle.divider} />
          </View>

          <View style={tableStyle.TableSection}>
            {data.headers && data.headers.length > 0 ? (
              <Table
                borderStyle={{
                  borderWidth: Size.px_1,
                  borderColor: Color.dividerColor,
                }}
              >
                <Row
                  data={data.headers}
                  flexArr={[Size.num_1]}
                  style={tableStyle.head}
                  textStyle={tableStyle.headerText}
                />
                <TableWrapper style={tableStyle.wrapper}>
                  <Rows
                    data={data.data}
                    flexArr={[Size.num_1]}
                    style={tableStyle.row}
                    textStyle={tableStyle.text}
                  />
                </TableWrapper>
              </Table>
            ) : (
              <ActivityIndicator color={Color.loaderColor} size={Strings.lg} />
            )}
          </View>
          <ListModel
            modalState={modalState}
            close={closeModal}
            onPress={handleOptions}
            data={files}
          />
        </View>
      ) : null}
    </StrictMode>
  );
};

export default TableTwo;

仪表板组件：

import React, { StrictMode, Component } from "react";
import { View, ScrollView } from "react-native";
import { GraphCardList as GraphList } from "../components";
import { InfoCardList as InfoList } from "../components";
import { TableTwo as Table } from "../components";
import Loader from "../components/Loader";
import Store from "../database/Storage";
import OptionsCard from "../components/Option";
import { Card as CardUI } from "../components";
import { dashboardStyle as dashboardUI } from "../styles";
import Api from "../services/api";
import inputValidation from "../helper/Validation";
import TableExport from "../exports/TableExport";
import Permission from "../services/AppPermission";

export default class DashboardScreen extends Component {
  

  constructor(props) {
    super(props);
    this.state = {
   
      tableList: [],
    
    };

   
    this.downloadData = this.downloadData.bind(this);
  }

  componentDidMount() {
 
  }

  componentWillUnmount() {

  }

  
  downloadData(title) {
    ...
  }
shareData(){
....
}

  render() {
    const {
      loader2,
      infoList,
      chartList,
      tableList,
      userList,
      loader,
      pauseState,
    } = this.state;
    //console.log("users",infoList);
    if (loader) {
      return (
        <View style={dashboardUI.mainContainer}>
          <Loader />
        </View>
      );
    }

    return (
      <StrictMode>
       
                <CardUI style={dashboardUI.Cards}>
                  <Table data={tableList} onPress={this.downloadData} />
                </CardUI>
           
            )}
         
      </StrictMode>
    );
  }
}

Answer 1

如果您为两个不同的按钮传递相同的道具，则意味着这两个按钮将执行相同的方法，但如果您想为每个按钮传递不同的方法，只需传递不同的道具即可。

例如组件 B：

<View>
    <Button title="Download" onPress={props.download}/>
    <Button title="Share" onPress={props.share}/>
</View>

组件 A：

<B download={this.downloadData} share={this.shareData}/>

Answer 2

Please try below code:

**In Dashboard Component:**
downloadData() {
}

`return (<Table data={tableList} handleDownloadData={this.downloadData} />);`

**In Table Component:**

 const download = (data) => {
    props.handleDownloadData(data);
  };

   const share = (data) => {
    props.handleDownloadData(data);
  };`

`return (<div><Button  onClick={download}> Download</Button><Button onClick={share}> Share</Button></div>);
`

在反应中将多个方法从父组件传递给子组件

2 个答案: