javascript - 如何在呈现的表格上切换状态 - React Js

Question

我有一个如下所示的表格，显示状态是真还是假。现在，我想用图标切换状态。使用下面的代码，当我单击该图标时，我会在我的控制台中看到状态发生变化，但在桌面上。

当用户单击特定行上的每个图标以更改状态时，如何使状态更改反射(reflect)在呈现的表格上？

Index.js

     state = {
             status: false

       }
        changeStatus(item)
        {
            this.setState(prevState => ({
             status: !prevState.status
           }));
           console.log('status' ,this.state.status)
        }

         <table className="table table-borderless">
           <thead>
              <tr>
              <th>item</th>
              <th>Status</th>
              <th>Action</th>
              </tr>
              </thead>

              <tbody> 
              {this.state.Data.map((item, key) => (
              <tr>
              <td>Samsung</td>
              <td>    
              {this.state.status == "false" ? (
              <Badge className="mb-10 mr-10" color="danger" pill>False</Badge>  
              ) : (
              <Badge className="mb-10 mr-10" color="success" pill>True</Badge>  
             )}
              </td>              
              <td>
              <i onClick={() => this.changeStatus(item)} className="ti-eye"></i></td>    
               </tr>
                )       
              </tbody>

               </table>

Answer 1

this.state.status == "false"

此检查不正确 - .state 中的 true/false 值都会给你 false 作为此检查的结果(这就是为什么您在表中看不到更改)

尝试使用

<td>{this.state.status? (
              <Badge className="mb-10 mr-10" color="danger" pill>False</Badge>  
              ) : (
              <Badge className="mb-10 mr-10" color="success" pill>True</Badge>  
             )}
              </td>