Question

我有一条消息列表，这些消息是通过映射它们显示的。这些消息中的每一个都有其自己的+框，当按下时，我想显示有关该特定消息的更多信息。我在以该邮件特定框为目标时遇到问题，因此按时每个加号框仅显示与之相关的信息。

我曾尝试在onClick函数上放置一个事件，如果event.target.id与消息ID匹配，则它将运行一个函数。

class AllMessages extends Component {
    handleBoxOpen () {
        alert('hi')
    }

        Messages = () => {
        return messages.map((item, i) => {
            return (
                <AllMessagesContainer>
                    <MainMessagesContainer>
                        <BoxButtonContainer key={i} dataId={item.id}>
                            <BoxButton onClick={(event) => event.target.id === item.id ? this.handleBoxOpen() : '' }>
                                <i class="far fa-plus-square"></i>
                            </BoxButton>
                        </BoxButtonContainer>
                        <SenderContainer>
                            <Sender>{item.sender}</Sender>
                        </SenderContainer>
                        <BodyContainer>
                            <Body>{item.body}</Body>
                        </BodyContainer>
                        <TypeContainer>
                            <Type>{item.type}</Type>
                        </TypeContainer>
                        <DateContainer>
                            <Date>{item.sentDate}</Date>
                        </DateContainer>
                    </MainMessagesContainer>
                </AllMessagesContainer>
            )  
        })
   }

我希望在单击其中一个框但没有任何反应的情况下显示警报，因为显然没有满足条件。

Answer 1

我认为您应该将id属性传递给框按钮，然后将其添加到可点击的组件中：

<BoxButton
    id={item.id}
    onClick={(event) => { event.target.id === item.id ? this.handleBoxOpen() : ''; }}
>
    <i class="far fa-plus-square"></i>
</BoxButton>

但是我更希望使用状态来管理您的物品：

<BoxButton
    id={item.id}
    onClick={() => { this.handleBoxOpen(item.id); }}
>
    {
        this.state[item.id] ? (
            <i class="far fa-plus-square"></i>
        ) : (
            <i class="far fa-minus-square"></i>
        )
    }
</BoxButton>

handleBoxOpen(id) {
    alert(id);
    // Do something with the id for example
    this.setState({ [id]: !this.state[id] });
    // Or
    this.setState({ selected: id });
}

如何动态地具有根据按钮id呈现不同信息的按钮

1 个答案: