Javascript 在React.js上处理单元格单击状态

我将该州定义为：

constructor(props){
        super(props);

        this.state = {
            posts:[],
            post:{},
            openNew:false,
            openModify:false
        };
    }

通过以下包含fetch的函数，我接收到一个带有responseData的对象数组：

getPosts(){
        fetch(
            DOMAIN+'/api/posts/', {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {
                return response.json();
            })
            .then((responseData) => {
                this.setState({posts:responseData});
                console.log("Log del responseData de posts");
                console.log(responseData);
            })
            .catch(function() {
                console.log("error");
            });
    }

此函数在

componentDidMount

中调用：

componentDidMount(){
        this.getPosts()
    }

从fetch中获取并保存在

this.state.products

中的JSON对象如下所示：

如前面在fetch中所示，使用此行

this.setState（{posts:responseData}）我可以将
帖子
传递到我希望显示
标题
、
日期
和
小时
的表格：

<DataTables
    height={'auto'}
    selectable={false}
    showRowHover={true}
    columns={CAMPAIGN_TABLE_COLUMNS}
    data={this.state.posts}
    showCheckboxes={false}
    rowSizeLabel="Filas por página"
    onCellClick={this.handleOpenModify.bind(this)}
                />

通过所有这些，我可以在表上打印我想要的数据，如下所示：

我不能做的是：当我单击表格的一行以传递以前打印的值时，例如标题。


此对话框使用以下行构造：

                 <Dialog
                    title="Modificar Post"
                    actions={actions}
                    modal={false}
                    open={this.state.openModify}
                    onRequestClose={this.handleClose}
                    titleClassName="dialog-title"
                    contentStyle={{width:660}}
                    autoScrollBodyContent={true}
                >
                    <TextField
                        fullWidth={true}
                        floatingLabelText="Título"
                        errorText="¡Ups! No deberías ver este mensaje."
                        defaultValue={this.state.posts.title}
                    />
                </Dialog>

允许我在
文本字段中打印标题
，只需给
默认值
this.state.posts.title
，但它的工作方式与我添加的最后一张图片中的工作方式不同

注意：我在
handleOpenModify
中调用
getPosts（）
，以防在单击行时必须再次调用它，但它也不起作用

有什么建议吗？
DataTables
将
行数
和
列索引
作为参数提供给您

有关更多信息，请查看他们的文档：

console.log（'selectedPost'，this.state.posts[rowNumber]）
/>
DataTables
将
行数
和
列索引
作为参数提供给您

有关更多信息，请查看他们的文档：

console.log（'selectedPost'，this.state.posts[rowNumber]）
/>
这是一个关于如何在单击单元格时绑定和检索特定数据的示例

创建列表项

var list = CAMPAIGN_TABLE_COLUMNS.map((data, key) =>
    <td onClick={this.handleClick.bind(this, key)}>{data.title}</td>
)

至于您当前的代码，您需要修改此部分

onCellClick={this.handleOpenModify.bind(this)} // key or the array index

handleOpenModify(e, row, key) { // receive the column number as 3rd param
  let item = CAMPAIGN_TABLE_COLUMNS[key]; // now get the respective object
}

这是一个关于如何在单击单元格时绑定和检索特定数据的示例

创建列表项

var list = CAMPAIGN_TABLE_COLUMNS.map((data, key) =>
    <td onClick={this.handleClick.bind(this, key)}>{data.title}</td>
)

至于您当前的代码，您需要修改此部分

onCellClick={this.handleOpenModify.bind(this)} // key or the array index

handleOpenModify(e, row, key) { // receive the column number as 3rd param
  let item = CAMPAIGN_TABLE_COLUMNS[key]; // now get the respective object
}

多亏了@EdwardChopuryan和@Semi Friends，我才能够检索到我想要的数据

首先，我必须将我的函数名
handleOpenModify
更改为
handleCellClick
，因为我可以通过
行
参数，并将其保持在之前在状态中声明的
post{}
内

handleCellClick = (y,x,row) => {
        this.getPosts();
        this.setState({
            openModify: true,
            newForm:false,
            post:{...row, _id:row._id,title:row.title}})
    };

然后，在
DataTable
上，将其绑定到
onCellClick
参数：

<DataTables
    height={'auto'}
    selectable={false}
    showRowHover={true}
    columns={CAMPAIGN_TABLE_COLUMNS}
    data={this.state.posts}
    showCheckboxes={false}
    rowSizeLabel="Filas por página"
    onCellClick={this.handleCellClick.bind(this)}
                />

这就是结果

多亏了@EdwardChopuryan和@Semi Friends，我才能够检索到我想要的数据

首先，我必须将我的函数名
handleOpenModify
更改为
handleCellClick
，因为我可以通过
行
参数，并将其保持在之前在状态中声明的
post{}
内

handleCellClick = (y,x,row) => {
        this.getPosts();
        this.setState({
            openModify: true,
            newForm:false,
            post:{...row, _id:row._id,title:row.title}})
    };

然后，在
DataTable
上，将其绑定到
onCellClick
参数：

<DataTables
    height={'auto'}
    selectable={false}
    showRowHover={true}
    columns={CAMPAIGN_TABLE_COLUMNS}
    data={this.state.posts}
    showCheckboxes={false}
    rowSizeLabel="Filas por página"
    onCellClick={this.handleCellClick.bind(this)}
                />

这就是结果

看来您在处理数据时走错了方向。我认为您试图做的只是检索单击的单元格/行/项的标题。请记住，您仍然保存着上次getPosts中存储的数据。为什么不在单击时检索相应单元格的数据？绑定onclick传递id并从列表中检索信息我可以知道您是否在单击行的状态下设置了
post:[]
？或者你为什么在州里用这个@半朋友是的，这就是我想要的。我现在有点饱了。你能不能写一个大概的答案，说明我应该如何绑定onclick来传递id和检索我需要的数据？提前谢谢。正如@Semi-Friends提到的，您可以轻松做到这一点。但是我不认为第三方dataTable插件的
onCellClick
方法没有任何输入参数。我不知道您使用的插件是什么，但它应该将当前行或单元格作为参数提供给您。@NarasimhaReddy如果您指的是
post{}
，则它是状态中未使用的参数。您处理数据的方向似乎错误。我认为您试图做的只是检索单击的单元格/行/项的标题。请记住，您仍然保存着上次getPosts中存储的数据。为什么不在单击时检索相应单元格的数据？绑定onclick传递id并从列表中检索信息我可以知道您是否在单击行的状态下设置了
post:[]
？或者你为什么在州里用这个@半朋友是的，这就是我想要的。我现在有点饱了。你能不能写一个大概的答案，说明我应该如何绑定onclick来传递id和检索我需要的数据？提前谢谢。正如@Semi-Friends提到的，您可以轻松做到这一点。但是我不认为第三方dataTable插件的
onCellClick
方法没有任何输入参数。我不知道你在使用什么插件，但它应该给你当前的行或单元格作为参数。@NarasimhaReddy如果你指的是
post{}
，它是状态中一个未使用的参数。DataTables是material ui中的插件。@Eartair通过查看文档，它们返回
行数
，因此您可以将其与
posts
数组一起使用。我刚刚更新了代码示例：）@HemersonCarlin第一个参数不应该是rowNumber？您可以将其作为一个事件传递confusing@EdwardChopuryan我想是的。但是，如果您查看我发布的链接，它们会发送3个参数：
事件
、
行数
和
列索引
。是的，对不起。My bad:）DataTables是material ui的插件。@Eartair通过查看文档，它们返回
行数
，因此您可以将其与
帖子
数组一起使用。我刚刚更新了代码示例：）@HemersonCarlin
<TextField
      fullWidth={true}
      floatingLabelText="Título"
      errorText="¡Ups! No deberías ver este mensaje."
      defaultValue={this.state.post.title}
           />