Question

对React来说是新手，试图制作一些简单的“聊天”应用程序，但在某些功能上有些卡住。

我试图在用户列表中显示，onClick（在其中一个用户上）会更改类别（为活动），并且在点击其他用户时会将活动类别设置为新用户。

尝试了很多事情，设法使其处于活动状态，但是当碰到另一个用户时，旧的和那一个获得了“活动”类。

这是我的父母componenet

class Conversations extends React.Component {
constructor(props) {
    super(props);

    this.loadConversations = this.loadConversations.bind(this);
    this.selectChat = this.selectChat.bind(this);

    this.state = { count: 0, selected: false, users: [] }
}

selectChat = (token) => {
    this.setState({ selected: token });
}

loadConversations = (e) => {
    $.get('/inbox/get_conversations', (data) => {
        let r = j_response(data);
        if (r) {
            this.setState({ count: r['count'], users: r['data']});
        }
    });
}

componentDidMount = () => {
    this.loadConversations();
}

render() {
    return (
        <div>
            {this.state.users.map((user) => {
                return(<User selectChat={this.selectChat} selected={this.state.selected} key={user.id} {...user} />)
            })}
        </div>
    )
}

这是我的孩子组成部分

class User extends React.Component {
constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
        token: this.props.token,
        selected: this.props.selected,
        username: this.props.username
    }

}

handleSelect = (e) => {
    //this.setState({selected: e.target.dataset.token});
    this.props.selectChat(e.target.dataset.token);
}

render() {
    return (
        <div data-selected={this.props.selected} className={'item p-2 d-flex open-chat ' + (this.props.selected == this.props.token ? 'active' : '')} data-token={this.props.token} onClick={(e) => this.handleSelect(e)}>
            <div className="status">
                <div className="online" data-toggle="tooltip" data-placement="right" title="Online"></div>
            </div>
            <div className="username ml-3">
                {this.props.username}
            </div>
            <div className="menu ml-auto">
                <i className="mdi mdi-dots-horizontal"></i>
            </div>
        </div>
    )
}

任何帮助都会很棒...希望您能向我解释为什么我的方法无法正常工作。

谢谢。

Answer 1

selected={this.state.selected}是Conversations组件的属性。

设置为true后，每次聊天都会继承并被选中。

将selected属性添加到您的User组件中。

Answer 2

您可以使用index函数中的map来激活元素。

最初将selected设置为0；

this.state = { count: 0, selected: 0, users: [] }

然后将索引传递给子组件，并确保通过添加条件在准备好数据后呈现User组件。

{this.state.users.length > 0 && this.state.users.map((user,index) => {
      return(<User selectChat={this.selectChat} selected={this.state.selected} key={user.id} {...user} index={index} />)
})}

在子组件中，

<div data-selected={this.props.selected} className={`item p-2 d-flex open-chat ${(this.props.selected === this.props.index ? 'active' : '')}`} data-token={this.props.token} onClick={() => this.handleSelect(this.props.index)}>
            ...
</div>

handleSelect  = (ind) =>{
  this.props.selectChat(ind);
}

使用列表简化了Demo。

无法更改父组件的状态并重新渲染

2 个答案: