Question

constructor(props) {
  super(props);

  this.state = {
    posts: [],
    loading: true
  };
}

componentDidMount() {
    axios.get('/posts')
        .then(response => {
            console.log('---');
            console.log(response.data);
            console.log('---');
        this.setState({ posts: response.data, loading: false });
    });
}

toggleItem(index) {
    console.log('clicked index: '+index);
}

render () {
    let content;
    if (this.state.loading) {
        content = 'Loading...';
    } else {
        content = this.state.posts.map(post => {
        return(
            <li key={post.id} className={}>
                <div>   
                    <Moment format="MMM DD @ HH:MM">
                        <span className="badge badge-pill badge-primary">{post.created_at}</span>
                    </Moment>
                    <button className="btn btn-primary btn-sm" onClick={this.toggleItem.bind(this, post.id)}>Toggle Message</button>
                </div>
                <div className="msg">{post.message}</div>
            </li>
            )
        });
    }
    return (
            <div>
              <h1>Posts!</h1>
                <div className="row">
                    <div className="col-md-6">
                        {content}
                    </div>
                    <div className="col-md-6">
                        x
                    </div>
                </div>
          </div>
    );

我想要实现的目标 - 当有人点击按钮时，我想切换（显示或隐藏）相应的.msg。我努力的地方 - 我想默认隐藏所有消息，当点击按钮时，然后显示相应的消息。但我不知道如何在React中做到这一点 - 一个想法是使用CSS隐藏它们然后为被点击的项创建一个新状态？

或者我应该预先创建一个状态数组来监控所有消息吗？

Answer 1

您可以根据每个项目的布尔键有条件地添加CSS类或样式单击某个项目时，只需翻转布尔值即可。

这是一个小例子：

＆＃13;

class Item extends React.Component {
  onClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  }
  render() {
    const { name, active } = this.props;
    return (
      <div
        onClick={this.onClick}
        style={{ opacity: active ? '1' : '0.4' }}
      >
        {name}
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: [
      { name: 'Item 1', id: 1 },
      { name: 'Item 2', id: 2 },
      { name: 'Item 3', id: 3 },
      { name: 'Item 4', id: 4 },
      { name: 'Item 5', id: 5 },
    ]
  }

  onItemClick = id => {
    this.setState(prev => {
      const { items } = prev;
      const nexItems = items.map(item => {
        if (item.id !== id) return item;
        return {
          ...item,
          active: !item.active
        }
      });
      return { ...prev, items: nexItems };
    });
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {
          items.map(item => (
            <Item key={item.id} {...item} onClick={this.onItemClick} />
          ))
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
	<div id="root"></div>

＆＃13;

React - 如何从数组中独立切换项目（从DB加载）？

1 个答案: