1

我有这个组件：

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import './cardCheck.css';

@inject('auto')
@observer
class CardCheck extends Component {
  render() {
    const { auto } = this.props;

    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={event => {displayInfo}} />
          </div>
          <div className="results"></div>
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}

CardCheck.propTypes = {
  auto: PropTypes.shape({
    carCount: PropTypes.number
  })
};

CardCheck.wrappedComponent.defaultProps = {
  auto: autoPropTypeDefaults
};

export default CardCheck;

我想这样做，当有人单击带有值的输入时，检查下面的 div 并使用结果的类名来填充我来自商店的数据：

import { observable, action, computed } from 'mobx';

class Auto {
  @observable
  auto = [
    {
      name: 'Shop1'
    },
    {
      name: 'Shop2'
    }
  ];

  @action
  displayInfo() {

  }

}

export { Auto };

我试图让 displayInfo 函数使用带有来自 loadash 的地图的对象遍历数组，但它没有工作，它没有显示 div 内的数据，我该怎么做？

4

1 回答 1

0

您可以在组件上添加一个可观察的字段，您可以使用事件处理程序CardCheck切换该字段，当该字段存在时，您可以显示数组中的所有条目。onClicktrueauto

例子

class CardCheck extends Component {
  @observable
  checked = false;

  onClick = event => {
    event.preventDefault();
    this.checked = !this.checked;
  };

  render() {
    const { auto } = this.props;

    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={this.onClick} />
          </div>
          <div className="results">
            {this.checked &&
              auto.auto.map((a, index) => <div key={index}>{a.name}</div>)}
          </div>
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}
于 2018-08-04T12:31:26.223 回答