Question

我在主页面上有一个表格，让我们说main.js，我想要的是表格中每一次点击都要我在抽屉里显示数据。谁知道如何实现这个目标？我举了几个例子，但我做不到。

抽屉关闭时：

我喜欢把它展示在这个抽屉里。

但我的抽屉和我的桌子是单独的文件，所以

这是我的代码：

class Main extends React.Component {

    render(){

        return (
            <Table multiSelectable={this.state.multiSelectable} 
                onRowSelection={this._onRowSelection}>

                <TableHeader>

                    <TableRow>

                        <TableHeaderColumn style={tablestyles.columns.id}>
                            ID
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.name}>
                            Name
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.price}>
                            Price
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.category}>
                            Category
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.edit}>
                            Edit
                        </TableHeaderColumn>

                    </TableRow>

                </TableHeader>

                <TableBody>

                {Data.tablePage.items.map(item =>
                    <TableRow key={item.id}>

                        <TableRowColumn style={tablestyles.columns.id}>
                            {item.id}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.name}>
                            {item.name}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.price}>
                            {item.price}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.category}>
                            {item.category}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.edit}>
                            <Link className="button" to="/form">
                                <FloatingActionButton zDepth={0}
                                    mini={true} backgroundColor={grey200}
                                    iconStyle= {tablestyles.editButton}>
                                    <ContentCreate  />
                                </FloatingActionButton>
                            </Link>
                        </TableRowColumn>

                    </TableRow>

                ) }

            </TableBody>
        );
    }
};

export default CargoAddTable;

我想在行的每次点击中将数据显示到抽屉内的空白区域。

并且我的代码是：

<Paper style={papers} zDepth={5}>
       {this.props.onRowSelection}
</Paper>

这给了我没有错误和没有输出。

Answer 1

如果我理解正确，您需要桌面和抽屉组件的共同父级，这将从表中获取数据并将其传递给抽屉：

import Table from './Table';
import Drawer from './Drawer';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      selectedRow: {
        name: "",
        price: "",
        category: ""
      }
    }
    this.getRow = this.getRow.bind(this);
  }
  getRow(row){
    this.setState({selectedRow: row});
  }
  render(){
    return(
      <div>
        <Table getRow={this.getRow}/>
        <Drawer row={this.state.selectedRow}/>
      </div>
    );
  }
}

完整代码：https://codesandbox.io/s/04363w7qn

或检查Redux。

Answer 2

由于我无法在您的示例中看到父子关系（如果是这种情况，会有一个反应纯粹的解决方案）假设这两个页面之间没有依赖关系，并且可以异步加载，可以使用react-pub-sub或postal-react-mixin等第三方库，允许您发布/订阅异步到主题。

在您的情况下，主题应包含您要共享的对象（ selectedItem ）。

然后，您可以从 CargoAddTable 组件

发布该对象

_onRowSelection(key) {

     var itemselected = Data.tablePage.items[key];
     alert(key, itemselected);

     // Publish your object into 'Shared Item' topic.
     publish('Shared Item', itemSelected);
}

只是为了让所有可以访问该数组的页面都可以访问它。因此，您可以将其添加到您的案例 sample.js

中

subscribe('Shared Item', callback);

并使用该嫌疑人的内容。

Answer 3

请查看以下示例https://codesandbox.io/s/n2gqAxl7

Answer 4

尝试以{this.props.children}的身份访问道具数据。希望它适用于您的情况。 Reference Link

Answer 5

您可以通过反应路由器的动态路由传递活动行的索引或ID，并根据索引或ID从数据库中恢复数据（表行）。

如何将数组数据传递到React中的另一个页面？

5 个答案: