时间戳

首页 > 解决方案 > 在单个单元格中更新状态 (React)

reactjs - 在单个单元格中更新状态 (React)

问题描述

我搜索了高低，找不到我的问题的答案。我在 React 中有一个日期列表，我用它来动态创建一个表。日期是关键。我在 td 中也有一个复选框，如果该人单击该复选框，一些信息将显示在下一个 td 中，但仅限于该日期。

不幸的是，每当有人单击复选框时，我都无法弄清楚如何仅在特定单元格中更新状态。相反，它会更新每一行的状态，而不仅仅是单击的日期。这是我尝试过的：让 show 成为一个对象，同时持有 id 和“false”。我还尝试摆脱条件语句并使用 document.write。我已经用谷歌搜索了这个，并且似乎找不到任何显示如何在动态创建表时更新单个单元格中的状态的内容。

import React from 'react';

class TablePage extends React.Component {
    state = { show: false, dates: ["8/21/19", "8/22/19", "8/23/19", "8/24/19"]   }

    handleClick = e => {
        e.preventDefault()
        let id = `${e.target.value}`
        let check = document.getElementById(id).getElementsByTagName("td")[0].getElementsByTagName('input')[0].checked === true
        if (check) {
            console.log(id);
            //I only want to update state in this cell below 
            let cellToTarget = document.getElementById(id).getElementsByTagName("td")[1]
            ////I HAVE NO IDEA WHAT TO PUT HERE TO ONLY TARGET that cell??
            ///The code below updates the cell for each date, not just the one cliced
            this.setState(prevState => ({ show: !prevState.show }))
        }
    }

    render() {
        return (
            <table className="table"  >
                <thead>
                    <tr>
                        <th scope="col">Day</th>
                        <th scope="col">Clicked</th>
                        <th scope="col">Data</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.dates.map(i =>

                        <tr key={i} id={i} >
                            <th scope="row">{i}</th>
                            <td className={i}><input className="form-check-input" type="checkbox" value={i} onClick={(i) => this.handleClick(i)}></input> </td>

                            <td className={i}>{this.state.show ? "My row got checked!" : null}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        )
    }
}

export default TablePage

我知道我的代码有什么问题......我只是不知道如何解决它！

标签： reactjsstate

解决方案

td实际上，由于这种情况，你得到了所有的价值，

{this.state.show ? "My row got checked!" : null}

您必须维护一个arrayofchecked checkboxes以显示相应的值td。

state = {showMessage: []}

你的handleClick功能应该是，

handleClick = e => {
    let id = e.target.value;
    
    if(e.target.checked){
       //If check show message
       this.setState({showMessage:[...this.state.showMessage, id]})
    }else{
       //If uncheck the hide message
       this.setState({showMessage: this.state.showMessage.filter(date => date != id)})
    }
}

演示

注意：而不是onClick你必须使用onChangeon input。

推荐阅读