javascript - 如何在 React 中访问另一个 jsx 文件中的一个 jsx 文件的数据？

Question

显示的组件是一个可编辑的表格。我需要在父表单中单击提交按钮时将此组件和父组件的数据发送到单独的组件。我对此很陌生。有人能帮我吗？我必须在单击按钮时访问数据源。是否有某种表达式可以直接在父级中调用来自子级的数据？我必须在单击按钮时访问数据源。是否有某种表达式可以直接在父级中调用来自子级的数据？

export default class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: 'Backup Of',
        dataIndex: 'backupOf',
        render: (select, record) =>
          this.state.dataSource.length >= 1 ? (
                      <Select name='backupOf' defaultValue='Select'>
                        <option value="1">Files Or Folder</option>
                        <option value="2">SQL DB</option>
                       </Select>
          ) : null,
      },
      {
        title: 'Server IP',
        dataIndex: 'serverIp',
        editable: true,
      },
      {
        title: 'Server Type',
        dataIndex: 'serverType',
        render: (select, record) =>
        this.state.dataSource.length >= 1 ? (
                    <Select defaultValue='Select' name='servertype' >
                      <option value="1"> Production</option>
                      <option value="2"> Dev</option>
                    </Select>
        ) : null,
      },
      {
        title: 'Frequency',
        dataIndex: 'frequency',
        render: (select, record) =>
        this.state.dataSource.length >= 1 ? (
                    <Select defaultValue='Select' name='freq'>
                      <option value="1"> One time</option>
                      <option value="2"> Daily</option>
                      </Select>
        ) : null,
      },
      {
        title: 'Backup Drive',
        dataIndex: 'backupDrive',
        render: (select, record) =>
        this.state.dataSource.length >= 1 ? (
                    <Select defaultValue='Select' name='backupdrive'>
                      <option value="1"> LTO2</option>
                      <option value="2"> LTO3</option>
                    </Select>
        ) : null,
      },

      {
        title: 'operation',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
              <a href="javascript:;">Delete</a>
            </Popconfirm>
          ) : null,
      },
    ];

    this.state = {
      dataSource: [
        {
          key: '0',

        }

      ],
      count: 1,
    };
  }

  handleDelete = key => {
    const dataSource = [...this.state.dataSource];
    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
  };

  handleAdd = () => {
    const { count, dataSource } = this.state;
    console.log('datasource................',this.state)
    const newData = {
      key: count,

    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  };

  handleSave = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });
  };

  render() {
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });
    return (
      <div>
        <Table
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          dataSource={dataSource}
          columns={columns}
          style={{overflowX:"scroll"}}
        />
        <Button onClick={this.handleAdd} style={{marginTop: 16 }}>
          Add a row
        </Button>
      </div>
    );
  }
}

标签： javascripthtmlreactjs

Answer 1

我可以了解更多关于父组件的信息吗？解决方案取决于您当前处理数据的方式。根据我所看到的，您有两种选择。

1. 您应该将数据移动到父组件，其中包含共享正在处理的数据的两个组件。进行更集中的数据管理。

2. 或者您可以将函数放在父组件中并绑定它，以便可以将数据传递到那里以被抛出到另一个子组件。