如何使用reactjs提交父组件中的子值？

Question

我是新手，我的目标是将值从父组件传递给子组件，但不知道如何从父组件传递给子组件。我在子组件中给出了handlecheck 函数并希望在父组件中获取值（将数据从子组件检索到父组件会很困难，这就是为什么想要在父组件中提供函数并从父组件获取handleCheck 函数的原因孩子 - 我不知道如何处理参数（e，x））此外，我无法在 TableSample 中全选。

谁能帮助我如何在父组件（Sample.js）中定义函数并在子组件中检索。还有人可以使用Tableheader 中的复选框帮助我处理TableSample 中的Selecting all 数据吗？

TableSample.js

 <TableContainer>
          <Table stickyHeader aria-label="caption table">
            <TableHead>
              <TableRow>
                <Checkbox />
                <TableCell align="left">FirstName</TableCell>
                <TableCell align="left">LastName</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.state.data.map(x => (
                <TableRow>
                  <Checkbox
                    label={x}
                    key={x.toString()}
                    onChange={e => this.handleCheck(e, x)}
                    checked={this.state.checkedValues.includes(x)}
                  />

                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                </TableRow>
              ))}
              }
            </TableBody>
          </Table>
        </TableContainer>

示例.js：

 <Button variant="outlined" color="primary" onClick={this.handleClick}>
          File
        </Button>
        <Dialog
          maxWidth="md"
          fullWidth={true}
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.open}
        >
          <DialogTitle
            className="dialog-header"
            id="customized-dialog-title"
            onClose={this.handleClose}
          >
            Details
            <CloseIcon onClick={this.handleClose} />
          </DialogTitle>
          <DialogContent dividers>
            <TableSample />
          </DialogContent>
          <DialogActions dividers>
            <Button onClick={this.handleSubmit}>Create</Button>
            <Button onClick={this.handleClose}>Cancel</Button>
          </DialogActions>
        </Dialog>

我想提交Sample.js 中的数据值。任何人都可以在这个查询中帮助我处理父组件中的函数并传递给子组件吗？

问题：

1. 选择所有复选框功能。 （我无法编写全选功能）

2. 如何获取创建按钮中的值（用于handleSubmit）

Answer 1

您需要将数据状态从 Table 移动到 SampleModal 容器中

constructor() {
   super();
   this.state = {
      open: false,
      data: [
        { id: 1, firstName: "ABC", lastName: "XYZ" },
        { id: 2, firstName: "EDF", lastName: "GHI" },
        { id: 3, firstName: "FHI", lastName: "NHR" }
      ],
      checkedValues: []
   };
}

handleCheck = (e, x) => {
 if(e.target.id === "checkall")
    this.setState(state => {
       if (state.checkedValues.includes("checkall"))
          return { checkedValues: [] };
       else return { checkedValues: [...this.state.data, "checkall"] };
    });
 else
    this.setState(state => {
       if (state.checkedValues.includes(x))
          return {
             checkedValues: state.checkedValues.filter(c => c !== x)
          };
       return { checkedValues: [...state.checkedValues, x] };
    });
};

handleSubmit = e => {
  e.preventDefault();
  //how to get the data value to get submit over here
  console.log(this.state.checkedValues.filter(x => x !== "checkall"));
};

然后你将 props 传递给表格示例组件

<TableSample
     data={this.state.data}
     handleCheck={this.handleCheck}
     checkedValues={this.state.checkedValues}
/>

然后在表格中将道具传递给每个复选框和表格行

<Table stickyHeader aria-label="caption table">
        <TableHead>
          <TableRow>
            <Checkbox
              id="checkall"
              onChange={e => this.props.handleCheck(e)}
            />
            <TableCell align="left">FirstName</TableCell>
            <TableCell align="left">LastName</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {this.props.data.map(x => (
            <TableRow>
              <Checkbox
                label={x}
                key={x.toString()}
                onChange={e => this.props.handleCheck(e, x)}
                checked={this.props.checkedValues.includes(x)}
              />

              <TableCell>{x.firstName}</TableCell>
              <TableCell>{x.lastName}</TableCell>
            </TableRow>
          ))}
        </TableBody>
</Table>

你可以在这里看到CodeSandBox

Answer 2

您可以在子组件中使用 props 并将属性作为状态传递给子组件。

例如

https://towardsdatascience.com/passing-data-between-react-components-parent-children-siblings-a64f89e24ecf?gi=55a30bc73758