Question

I am creating a webpage that contain a table. Table data

Now I want to update table row data onclick(table row). I have done onclick part. After clicking on table row:This child page open

Now guys, I need your help, How to pass table row data onclick to child component form textboxes. Thanks in advanced.

Parent COmponent Code:

  export class QuotationForm extends React.Component<AllProps>{
      public componentDidMount() {
        const { data } = this.props;
        if (data.length === 0) {
          this.props.fetchRequest()
        }
      }
      public render() {
        const { loading, data, errors } = this.props
        console.log(errors);
        return (
          <Page>
                {loading && (
                  <LoadingOverlay>
                    <LoadingOverlayInner>
                      <LoadingSpinner />
                    </LoadingOverlayInner>
                  </LoadingOverlay>
                )}
                {/* <p>
                  <small>Quotation Data Of Shiping</small>
                </p> */}
                {this.renderData(loading, data)} 
          </Page>
        )
      }
      handleClick(quot:any){
        alert(quot.quotationNumber)
        console.log("passing data",quot)
      }
      private renderData(loading: boolean, data: IQuotation[]) {
        const { classes }: any = this.props;
        console.log("Quotation Data", this.props)
        return (
          <div className={classes.section}>
            <Table className={classes.tableStyle}>
              <TableHead className={classes.thead} >
                <TableRow >
                  <TableCell className={classes.tcell}>QuotationNumber</TableCell>
                  <TableCell className={classes.tcell}>Date</TableCell>
                  <TableCell className={classes.tcell}>Quoted To</TableCell>
                  <TableCell className={classes.tcell}>Quoted By</TableCell>
                  <TableCell className={classes.tcell}>Valid Till</TableCell>
                  <TableCell className={classes.tcell}>Valid From</TableCell>
                  <TableCell className={classes.tcell}>Services</TableCell>
                  <TableCell className={classes.tcell}>Status</TableCell>
                  <TableCell className={classes.tcell}>Location</TableCell>
                </TableRow>
              </TableHead>
              {loading && data.length === 0}

              {data.map((quot) => (

              <TableBody className={classes.tbody}>
              <TableRow hover  key={quot.quotationNumber} className={classes.tcell}> 
                    <TableCell><a href="/quotationUpdate" onClick={this.handleClick.bind(this,quot)}>{quot.quotationNumber}</a></TableCell>
                    <TableCell>{quot.date}</TableCell>
                    <TableCell>{quot.quotedTo}</TableCell>
                    <TableCell>{quot.quotedBy}</TableCell>
                    <TableCell>{quot.validTill}</TableCell>
                    <TableCell>{quot.validFrom}</TableCell>
                    <TableCell>{quot.services}</TableCell>
                    <TableCell>{quot.status}</TableCell>
                    <TableCell>{quot.location}</TableCell>
              </TableRow>
              </TableBody>))}
            </Table>
          </div>)
      }
    }

Child Component Code(After Clicking on Table row this page is rendering)

class quotationUpdate extends React.Component {
    render() {
        const {classes}:any=this.props;
        return (
            <div>    
                <h3 style={{color:"black"}}>Update Data</h3>

                    <Card className={classes.cardStyle}>
                    <form style={{ padding: "5%" }}>
                        <Table className={classes.tableStyle} >
                            <TableRow>
                                <h5><TableCell>Quotation No<TextField variant="outlined" /></TableCell>
                                {/* {console.log(quotationNuber)} */}
                                    <TableCell>Valid From <TextField variant="outlined" /></TableCell>
                                    <TableCell>Vaild Till<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                            <TableRow>
                                <h5><TableCell>Organization<TextField variant="outlined" /></TableCell>
                                    <TableCell>Useability<TextField select variant="outlined" defaultValue="None" fullWidth helperText="Please Select Value">
                                        <MenuItem value=""><em>None</em></MenuItem>
                                        <MenuItem value={0}>Single</MenuItem>
                                        <MenuItem value={1}>Multiple</MenuItem>
                                    </TextField>
                                    </TableCell>
                                    <TableCell>Version<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                            <TableRow>
                                <h5><TableCell>FastTrack<TextField multiline variant="outlined" /></TableCell>
                                    <TableCell>Party Role <TextField select disabled defaultValue="Customer" fullWidth variant="outlined" /></TableCell>
                                    <TableCell>Cargo Status<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                        </Table><br /><br />

Answer 1

根据您的代码，表组件获取道具中的数据，这意味着加载的数据存在于父组件中。因此，在点击手柄内部，您必须“标记”选定的行，以便在呈现public class InheritanceApp { class Product { // atributes int p_id; String name; double price; // constructor Product() { System.out.println(">> Product Object Constructed"); } // method public void setProductDetails(int p_id, String name, double price) { this.p_id = p_id; this.name = name; this.price = price; } // Read data from product object public void showProductDeatails() { System.out.println("---------Product Id: " + p_id + "-----------"); System.out.println("Name : \t" + name); System.out.println("Price : \t" + price); System.out.println("------------------------------------------------"); } } public static void main(String[] args) { // Creat object : product Product product = new Product(); // Writting data into an object product.setProductDetails(100, "Nike", 6700.60); // Reading data from an object product.showProductDeatails(); } }时“检测”它。

您可以在道具中发送quotationUpdate函数，以便在单击所选行时对其进行“标记”。

此解决方案不是那么“不错”，并且在将来的更改中不会很好...

您在反应中遇到了经典的状态管理问题。有很多方法可以解决此问题，而大多数经过“战斗测试”的解决方案都是redux。

Answer 2

确定，您正在更改路线。因此，一个新的组件开始工作。在这种情况下，您可以做一件事。创建一个服务，在其中暂时保存数据，更改路由更新后，路由将从服务中获取数据。让我们看一下示例。

 class sharedService(){
    static storeData:any;
    constructor(){
    }
}

现在将其导入到您的两个组件中。您的父组件将如下所示。

import sharedService from 'your file location';

export class QuotationForm extends React.Component<AllProps>{
      public componentDidMount() {
        const { data } = this.props;
        if (data.length === 0) {
          this.props.fetchRequest()
        }
      }
      public render() {
        const { loading, data, errors } = this.props
        console.log(errors);
        return (
          <Page>
                {loading && (
                  <LoadingOverlay>
                    <LoadingOverlayInner>
                      <LoadingSpinner />
                    </LoadingOverlayInner>
                  </LoadingOverlay>
                )}
                {/* <p>
                  <small>Quotation Data Of Shiping</small>
                </p> */}
                {this.renderData(loading, data)} 
          </Page>
        )
      }
      handleClick(quot:any){
        alert(quot.quotationNumber)
        console.log("passing data",quot)
        sharedService.storeData=quot;
      }
      private renderData(loading: boolean, data: IQuotation[]) {
        const { classes }: any = this.props;
        console.log("Quotation Data", this.props)
        return (
          <div className={classes.section}>
            <Table className={classes.tableStyle}>
              <TableHead className={classes.thead} >
                <TableRow >
                  <TableCell className={classes.tcell}>QuotationNumber</TableCell>
                  <TableCell className={classes.tcell}>Date</TableCell>
                  <TableCell className={classes.tcell}>Quoted To</TableCell>
                  <TableCell className={classes.tcell}>Quoted By</TableCell>
                  <TableCell className={classes.tcell}>Valid Till</TableCell>
                  <TableCell className={classes.tcell}>Valid From</TableCell>
                  <TableCell className={classes.tcell}>Services</TableCell>
                  <TableCell className={classes.tcell}>Status</TableCell>
                  <TableCell className={classes.tcell}>Location</TableCell>
                </TableRow>
              </TableHead>
              {loading && data.length === 0}

              {data.map((quot) => (

              <TableBody className={classes.tbody}>
              <TableRow hover  key={quot.quotationNumber} className={classes.tcell}> 
                    <TableCell><a href="/quotationUpdate" onClick={this.handleClick.bind(this,quot)}>{quot.quotationNumber}</a></TableCell>
                    <TableCell>{quot.date}</TableCell>
                    <TableCell>{quot.quotedTo}</TableCell>
                    <TableCell>{quot.quotedBy}</TableCell>
                    <TableCell>{quot.validTill}</TableCell>
                    <TableCell>{quot.validFrom}</TableCell>
                    <TableCell>{quot.services}</TableCell>
                    <TableCell>{quot.status}</TableCell>
                    <TableCell>{quot.location}</TableCell>
              </TableRow>
              </TableBody>))}
            </Table>
          </div>)
      }
    }

现在您的更新组件将如下所示。

    import sharedService from 'your file location';
    class quotationUpdate extends React.Component {
        render() {
            const {classes}:any=this.props;
const data = sharedService.storeData;
            return (
                <div>    
                    <h3 style={{color:"black"}}>Update Data</h3>

                        <Card className={classes.cardStyle}>
                        <form style={{ padding: "5%" }}>
                            <Table className={classes.tableStyle} >
                                <TableRow>
                                    <h5><TableCell>Quotation No<TextField variant="outlined" /></TableCell>
                                    {/* {console.log(quotationNuber)} */}
                                        <TableCell>Valid From <TextField variant="outlined" /></TableCell>
                                        <TableCell>Vaild Till<TextField variant="outlined" /></TableCell></h5>
                                </TableRow>
                                <TableRow>
                                    <h5><TableCell>Organization<TextField variant="outlined" /></TableCell>
                                        <TableCell>Useability<TextField select variant="outlined" defaultValue="None" fullWidth helperText="Please Select Value">
                                            <MenuItem value=""><em>None</em></MenuItem>
                                            <MenuItem value={0}>Single</MenuItem>
                                            <MenuItem value={1}>Multiple</MenuItem>
                                        </TextField>
                                        </TableCell>
                                        <TableCell>Version<TextField variant="outlined" /></TableCell></h5>
                                </TableRow>
                                <TableRow>
                                    <h5><TableCell>FastTrack<TextField multiline variant="outlined" /></TableCell>
                                        <TableCell>Party Role <TextField select disabled defaultValue="Customer" fullWidth variant="outlined" /></TableCell>
                                        <TableCell>Cargo Status<TextField variant="outlined" /></TableCell></h5>
                                </TableRow>
                            </Table><br /><br />

希望这对您有用。

Pass Table row data onclick to child component in reactjs

2 个答案: