Question

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

不幸的是，每当有人单击复选框时，我都无法弄清楚如何仅在特定单元格中更新状态。而是，它更新每一行的状态，而不仅仅是单击日期。这是我尝试的方法：显示对象，同时保留id和“ false”。我还尝试摆脱条件语句并使用document.write。我已经用Google搜索了一下，当动态创建表时，似乎找不到任何能显示如何在单个单元格中更新状态的东西。

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

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

Answer 1

实际上，由于这种情况，您在所有td中都获得了价值，

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

您必须保持array中的checked 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)})
    }
}

Demo

注意：您必须在onClick上使用onChange来代替input。

更新单个单元中的状态（反应）

1 个答案: