Question

我有一个包含动态值的字段。测试我发布了大约500个按钮。由于每个元素当前都有自己的OverlayTrigger和Tooltip。实际点击元素的结果非常慢。

Tooltip元素只有2个唯一元素。这是“点击启用”或“点击禁用”。所以我只需要2个OverlayTriggers。现在，对于500个按钮中的每个按钮，有500种不同的OverlayTriggers和500种不同的工具提示。

有没有办法将此减少到2个OverlayTriggers和2个工具提示？然后将唯一按钮添加到适当的OverlayTrigger？或者我应该以不同的方向解决这个问题吗？

以下是一些代码：

var bsstyle = this.props.enabled ? this.props.enableBsStyle : this.props.disableBsStyle;

var toolTipContent = `Click to ${this.props.enabled ? "disable" : "enable"}.`;

var toolTipId = `toolTip.${this.props.value}`;

const tooltip = (
  <Tooltip id={toolTipId}>{toolTipContent}</Tooltip>
);

return (
  <OverlayTrigger 
    placment={this.props.placement}
    overlay={tooltip}
  >
      <Button 
        bsStyle={bsstyle} 
        bsSize="xs" 
        onClick={this.props.onClick}
      > 
          {this.props.value} 
      </Button>
  </OverlayTrigger>

这是一些测试代码：

import React from 'react';
import ReactDom from 'react-dom';
import { Row, Col, Tooltip, OverlayTrigger, Button } from 'react-bootstrap';
import Formsy from 'formsy-react';
var values = [];
for (i=0; i < 500; i++){values.push({value: i, enabled: i % 2 === 0});}
const RemoveableLabel = React.createClass({
  getDefaultProps: function (){
    return {
      placment: "bottom",
      enableBsStyle: "primary",
      disableBsStyle: "default",
      enabled: true
    };
  },
  render: function () {
    var bsstyle = this.props.enabled ? this.props.enableBsStyle :   this.props.disableBsStyle;
    var toolTipContent = `Click to ${this.props.enabled ? "disable" : "enable"}.`;
    var toolTipId = `toolTip.${this.props.value}`;
    const tooltip = (
      <Tooltip id={toolTipId}>{toolTipContent}</Tooltip>
    );
    return (
      <OverlayTrigger placment={this.props.placement} overlay={tooltip}>
        <Button bsStyle={bsstyle} bsSize="xs" onClick={this.props.onClick}>{this.props.value}</Button>
      </OverlayTrigger>
    );
  },
});
const RemoveableLabelCollection = React.createClass({
  mixins: [Formsy.Mixin],
  handleClick: function(index){
    var values = this.getValue();
    var indexValue = values[index];
    var enabled = indexValue.enabled ? false : true;
    indexValue.enabled = enabled;
    values[index] = indexValue;
    this.setValue(values);
  },
  render: function () {
    var self = this;
    var labels = this.getValue().map(function (item, i) {
      var boundClick = self.handleClick.bind(self, i)
        return (
          <RemoveableLabel key={i + self.props.name + item} name={self.props.name + item} value={item.value} enabled={item.enabled} onClick={boundClick}/>
        );
    });
    return (
      <Row>
        <Col sm={12}>
          {labels}
        </Col>
      </Row>
    );
  },
});
const View = React.createClass({
  getInitialState: function(){return {labels: values, canSubmit: false};},
  onInvalid: function () {
    this.setState({ canSubmit: false });
  },
  onValid: function() {
    this.setState({ canSubmit: true });
  },
  onSubmit: function(data) {
    alert(JSON.stringify(data, null, 4));
    this.setState({labels: []});
    this.refs.form.reset();
  },
  render: function() {
    var clsName = this.props.className;
    return (
      <Form ref="form" onSubmit={this.onSubmit} onValid={this.onValid} onInvalid={this.onInvalid} className={clsName}>
        </Grid>
          <Row>
            <Col sm={12}>
              <RemovableLabelCollection name="labels" value={this.state.labels}/>
            </Col>
          </Row>
        </Grid>
      </Form>
    );
  }
});

ReactDom.render(<View />, document.getElementById('root'));

如何重用常见的叠加触发器

0 个答案: