通过在 React 中单击它们从数组中删除元素

Question

我有一个消息数组，这些消息被呈现为具有 array.map 和 key=index（在数组中）的反应组件。阵列被保存到一个状态。当我单击消息组件中的按钮时，我希望消息关闭。我考虑过将 key 变量传递给 Messages Component，这样我就可以通过以某种方式调用 target.key 在 closeMessage 函数中使用它，但是当我调用 key 属性时，我只会得到未定义的值。知道我该怎么做吗？提前致谢！

function Register () {

const [errors, setErrors] = useState([{ msg: 'abc' }, { msg: 'cde' }]);

const closeMessage = ({target}) => {
        setErrors(errors => errors.splice(target.key, 1));
    }

return (
<div className="register-container">
    <h1>Register</h1>
    {errors.map((error, index) => <Messages alert="warning" msg={error.msg} key={index} close={closeMessage}/>)}
</div>
)
};

function Messages (props) {

    return(
        <div className={'message '+props.alert} key={props.key} onClick={props.close}>
            {props.msg}
            <button type="button" className="message-close">
                <span>&times;</span>
            </button>
        </div>
    )
}

Answer 1

不要在 React 中使用 splice - 它会改变状态中的现有数组，并且禁止改变。使用被点击元素的索引来计算如何切分数组：

const makeCloseMessage = i => () => {
  setErrors(
    errors.slice(0, i).concat(errors.slice(i + 1));
  );
}

close={makeCloseMessage(index)}

Answer 2

您的代码中 key 属性的传递不正确。这就是您获得 undefined 值的原因。相反，您可以将 index 直接传递给 closeMessage() 函数。

如果要删除消息，您可以使用 slice() 方法或 filter() 方法。我正在根据您的代码示例使用 filter() 方法给出示例：

function Register () {

    const [errors, setErrors] = useState([{ msg: 'abc' }, { msg: 'cde' }]);

    const closeMessage = (key) => {
        setErrors(errors => errors.filter((item, index) => key !== index);
    }

    return (
       <div className="register-container">
         <h1>Register</h1>
         {errors.map((error, index) => <Messages alert="warning" msg={error.msg} key={index} close={() => closeMessage(index)}/>)}
       </div>
    )
 };

Answer 3

target.key 是 undefined 登录后目标是 button 标签。我认为键号有属性但我使用 id 作为键号。在按钮标签上，我添加了 id，它从我给出索引的 Messages 组件中获取 props.id（我可以使用 int 索引，但在按钮标签上，键不能是道具，因此使用了字符串化数字）。通过 onClick 事件可以加载键号，因为它在按钮标签上有索引 id（所以有错误状态，拼接是可能的）。

function Register () {

const [errors, setErrors] = useState([{ msg: 'abc' }, { msg: 'cde' }]);

const closeMessage = ({target}) => {
        //use button tag's id for key number
        let getId = parseInt(target.id, 10);
        setErrors(errors => errors.splice(getId, 1));
    }

return (
<div className="register-container">
    <h1>Register</h1>
      {errors.map((error, index) => 
                      <Messages alert="warning" msg={error.msg} 
                      //Gave id to Messages commponent for key number
                      key={index} id={index.toString(10)} close={closeMessage}/>
                      )}

</div>
)
};

function Messages (props) {

    return(
        <div className={'message '+props.alert} key={props.key} onClick={props.close}>
            {props.msg}
            
            <button 
            //Took id by props from Messages commponent 
            id={props.id}
            type="button" 
            className="message-close">
                <span>&times;</span>

                <span>&times;</span>
            </button>
        </div>
    )
}

通过在 React 中单击它们从数组中删除元素

Removing elements from array by clicking on them in React

javascript

arrays

reactjs

state

splice