时间戳

首页 > 解决方案 > 删除后 UI 重新呈现并获取所有复选框

arrays - 删除后 UI 重新呈现并获取所有复选框

问题描述

复选框和删除功能工作正常.. 删除后 UI 重新呈现并再次获得所有复选框.. 标记的复选框不应再次出现。请建议我如何阻止这种情况。单击删除按钮后，我不希望用户界面中的复选框。

    import React,{Component} from 'react';
    import './UserList.css';
    import jsonData from '../../people_(5).json';

    const list = jsonData.People

    const list2 = list.map(v => {
      return {
        ...v,
        value: false
      }
    })
    list2.forEach((obj,index)=>obj.id=index)


    class UserList extends Component{
        state={
            userList: list2
        };

      handleChange = e => {
        console.log(this.state.userList)

        const id = e.target.id;

        this.setState(prevState => {
          return {
            userList: prevState.userList.map(
              li => (li.id === +id ? {...li,
                value: !li.value
                } : li)

            )
          };
        });
      };
      handleClick = () => {
        console.log(this.state.userList)

        this.setState(prevState => {
          return {
            userList: prevState.userList.filter(li => !li.value)
          };
        });
      };
    render(){
        return(
                <form className="pa4">
                  <fieldset id="people" className="del bn">
                    <legend className="fw7 mb2">People<button onClick={this.handleClick}>Delete</button></legend>
                    {this.state.userList.map(e => (
                          <div key={e.id}>
                            <input
                              type="checkbox"
                              id={e.id}
                              checked={e.value}
                              onChange={this.handleChange}
                            />
                            <label htmlFor={e.name}>{e.name}</label>
                          </div>
                        ))}

                   </fieldset>
                </form>


                );
        }
    }

    export default UserList

标签： arraysreactjscheckbox

解决方案

我认为您放置按钮的位置不正确。每次单击表单元素内的按钮都会导致页面重新呈现，也许您可​​以像这样更改按钮位置

<div>
   <form className="pa4">
      <fieldset id="people" className="del bn">
       ...
      </fieldset>   
   </form>
   <button onClick={this.handleClick}>delete</button>
</div>

页面重新渲染后，people会被设置为初始值，所以handleChange实际上是不起作用的，所以不能删除对应的input元素。

推荐阅读