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

Question

我是 React 新手，我的目标是将值从父组件传递到子组件，但不知道如何从父组件传递到子组件。我已经在子组件中提供了 handlecheck 功能，并希望在父组件中获取值(将数据从子组件检索到父组件会很困难，这就是为什么要在父组件中提供函数并获取从父级到子级的 handleCheck 函数 - 我不知道如何为参数 (e,x) 执行此操作)此外，我无法在 TableSample 中选择全部。

任何人都可以帮助我如何在父组件 (Sample.js) 中定义函数并在子组件中检索。还有谁能帮助我使用 Tableheader 中的复选框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"));
};

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

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

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

<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