Question

我真的很惊讶这不符合我的预期。

我希望在访问该网站的人悬停在用户的消息上时显示用户名。下面是我到目前为止的代码。问题是，当我将鼠标悬停在消息上时，我映射的数组中的每个用户名都会出现。如何更改此选项以便它只有一个用户名？

我想我需要在单独的组件中将状态更改为每个用户的消息，但是，我不认为这应该是必要的。

class App extends Component {

    state = {
        showUsername: false
    };

    showUsername = () => {

        this.setState({
            showUsername: true
        });

    }

    hideUsername = () => {

        this.setState({
            showUsername: false
        });

    }

    render() {

        let messageArr = this.props.messages.map(msg => {

            let name = `${msg.firstName} ${msg.lastName}`;

            return(
                <div key={msg.id}>

                    {this.state.showUsername && (
                        <span>{name}</span>
                    )}

                    <li><span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span></li>
                </div>
            );
        });

        return (
            <ul>
                {messageArr}
            </ul>
        );
    }
}

Answer 1

我想我需要在单独的组件中将状态更改为每个用户的消息，但是，我不认为这是必要的。

是的。有必要。

截至目前，有一个常见状态showUsername用于显示用户名，这就是您获得此效果的原因。

showUsername = (oneUserMessage) => {

    oneUserMessage.showUsername = true; // updating via reference
}

hideUsername = (oneUserMessage) => {

    oneUserMessage.showUsername = false;// updating via reference

}

//在渲染中返回

return (
            <div key={msg.id}>

                {msg.showUsername && (
                    <span>{name}</span>
                )}
                <li><span 
                  onMouseEnter={()=>{this.showUsername(msg)}} 
                  onMouseLeave={()=>{this.hideUsername(msg)}}>       
                  {msg.message}</span></li>


            </div>
        );

Answer 2

您的组件的行为与此类似，因为this.state.showUsername是组件内的状态。因此，无论哪个div悬停，它都会将state设置为true，而其他所有人也会this.state.showUsername收到true。

这使得所有这些都可见。

您应该做的是，编写一个具有div及其内部逻辑的新组件。因此，当您将其映射下来时，这些divs中的每一个都将拥有自己的状态。

另一件事，你可以像这样做地图：

        const messageArr = this.props.messages.map((msg) => <div key={msg.id}>
            <li>
               <span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span>
            </li>

        </div>);

所以不需要return语句：）

地图

2 个答案: