Question

我有4个组件名为SingleTopicBox的盒子。当用户点击特定的盒子时，我想改变盒子的颜色。 SingleTopicBox组件具有props topicID作为每个框的唯一标识符。目前，当用户点击任何一个框时，它正在改变所有框bgDisplayColor: 'red'的状态，但是，我想只更改被点击的框的颜色。

index.jsx

import {React, ReactDOM} from '../../../../build/react';

import SelectedTopicPage from './selected-topic-page.jsx';
import TopicsList from './topic-list.jsx';
import topicPageData from '../../../content/json/topic-page-data.js';

export default class MultiTopicsModuleIndex extends React.Component {

  constructor(props) {
    super(props);
    this.setTopicClicked = this.setTopicClicked.bind(this);
    this.onClick = this.onClick.bind(this);
    () => topicPageData;
    this.state = {
      isTopicClicked: false,
      bgDisplayColor: 'blue'
    };
  };

  onClick(topicID) {
    this.setState({isTopicClicked: true, topicsID: topicID, bgDisplayColor: 'red'});
  };

  setTopicClicked(boolean) {
    this.setState({isTopicClicked: boolean});
  };

  render() {
    return (
      <div className="row">
        {this.state.isTopicClicked
          ? <SelectedTopicPage topicsVisited={this.topicsVisited} setTopicClicked={this.setTopicClicked} topicsID={this.state.topicsID} key={this.state.topicsID} topicPageData={topicPageData}/>
        : <TopicsList bgDisplayColor={this.state.bgDisplayColor} topicsVisited={this.topicsVisited} onClick={this.onClick}/>}
      </div>
    );
  }
};

主题的list.jsx

import {React, ReactDOM} from '../../../../build/react';

import SingleTopicBox from './single-topic-box.jsx';
import SelectedTopicPage from './selected-topic-page.jsx';

export default class TopicsList extends React.Component {
  render() {
    return (
      <div className="row topic-list">
        <SingleTopicBox bgDisplayColor={this.props.bgDisplayColor} topicID="1" onClick={this.props.onClick} label="Topic"/>
        <SingleTopicBox bgDisplayColor={this.props.bgDisplayColor} topicID="2" onClick={this.props.onClick} label="Topic"/>
        <SingleTopicBox bgDisplayColor={this.props.bgDisplayColor} topicID="3" onClick={this.props.onClick} label="Topic"/>
        <SingleTopicBox bgDisplayColor={this.props.bgDisplayColor} topicID="4" onClick={this.props.onClick} label="Topic"/>
      </div>
    );
  }
};

单主题-box.jsx

import {React, ReactDOM} from '../../../../build/react';

export default class SingleTopicBox extends React.Component {
  render() {
    var divStyle = {
      backgroundColor: this.props.bgDisplayColor
    };
    return (
      <div>
        <div className="col-sm-2">
          <div style={divStyle} className="single-topic" data-topic-id={this.props.topicID} onClick={() => this.props.onClick(this.props.topicID)}>
            {this.props.label}
            {this.props.topicID}
          </div>
        </div>
      </div>
    );
  }
};

Answer 1

您似乎无法确定是否需要顶级组件或SingleTopicBox的状态，但无论如何都将它放在顶级组件中。

您应该做出选择：SingleTopicBox组件是否应该知道它已被点击，或者MultiTopicsModuleIndex是否应该记住单击了哪个SingleTopicBox？

如果您可以同时使用单击状态的多个SingleTopicBox组件，则应将状态和onClick hander移动到SingleTopicBox。如果已单击该组件及其背景颜色，则无需记住这两者。例如，您可以：

getInitialState: function() {
    return {
        bgDisplayColor: 'blue'
    };
},

onClick() {
    this.setState({bgDisplayColor: 'red'});
};

然后在渲染方法中使用this.state.bgDisplayColor

如果您希望在任何时候只点击一个组件，那么当单击另一个组件时，之前单击的组件将返回到未单击，您可能希望状态和处理程序位于顶级组件中，正如你已经在你的代码中拥有它。在状态中你唯一需要记住的是topicID，然后你将它作为属性传递给TopicsList组件：

<TopicsList clickedTopicID={this.state.topicID} onClick={this.onClick} />

并在TopicsList中呈现如下内容：

render: function() {
    var topics = [
        {id: 1, label: 'Topic'},
        {id: 2, label: 'Topic'},
        {id: 3, label: 'Topic'},
        {id: 4, label: 'Topic'},
    ];

    var boxes = [];

    for (var i = 0, len = topics.length; i < len; i++)
        boxes.push(<SingleTopicBox 
            bgDisplayColor={(this.props.clickedTopicID == topics[i].id) ? 'red' : 'blue'}
            topicID={topics[i].id}
            onClick={this.props.onClick}
            label={topics[i].label}
        />);

    return (
      <div className="row topic-list">
        {boxes}
      </div>
    );
}

React - 当同一组件有多个实例时，如何更改单个组件的状态？

1 个答案: