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

Question

我有一个消息数组，这些消息通过 array.map 和 key=index（在数组中）呈现为反应组件。数组被保存到一个状态。当我单击消息组件中的按钮时，我希望消息关闭。我考虑过将 key 变量传递给 Messages 组件，这样我就可以通过调用 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

target.key 是undefined，当登录目标是button 标记后。我认为键号有属性，但我使用 id 作为键号。在按钮标签上，我添加了 id，它从我提供索引的消息组件中获取 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>
    )
}

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

不要在 React 中使用 splice - 它会改变 state 中的现有数组，并且禁止改变。使用单击元素的索引来确定如何对数组进行切片：

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

close={makeCloseMessage(index)}