//Card.js


import React from 'react'
import ReactDOM from 'react-dom'
import Select from './Select.js'
import Value from './Value.js'
class Card extends React.Component {
  render () {
    let styles={
        all:{boxShadow: "rgba(0, 0, 0, 0.156863) 3px 3px 10px, rgba(0, 0, 0, 0.227451) 0px    3px 10px",
        width:"100%",
        height:"90px",
        maxWidth:"790px",
        margin:"0 auto",
        marginBottom:"10px"
      },
      left:{
        height:"90px",
        background:"#1976D2",
        width:"12%",
        float:"left",
        lineHeight:"90px",
        textAlign:"center",
        fontSize:"1.8em"
      },
      right:{
        padding:"10px 0 0 20px",
        float:"left",
        height:"90px",
        width:"88%"
      }
    };
    var baiRbai=[]
        baiRbai= Value.map((item,i) => {
        return(
          <div style={styles.all} key={i}>
            <a href={i+"/index.html"}>
            <div style={styles.left}>{i}</div>
            <div style={styles.right}>
              <h3 style={{marginBottom:"8px"}}>{item.title}</h3>
              <date>{item.date}</date>
            </div>
            </a>
          </div>
        )
    });
    return (
      <div>
        {baiRbai}
      </div>
    )
  }
}
export default Card;


//Select.js

import React, { PropTypes } from 'react'
import Card from './Card.js'
import Value from './Value.js'
import $ from 'jquery'
class Select extends React.Component {
  constructor() {
    super();
    this.state={
      showIndex:null,
      zhuangtai:false
    }

  }
  select(){
    let text=$(this.refs.text).val();
    let item=[];
    for (var i = 0; i < Value.length; i++) {
      let pat=RegExp(text);
      if (pat.test(Value[i].title)) {
        item.push(i);
      }
    }
    if (item.length>0) {
      this.setState({
        showIndex:item,
        zhuangtai:true
      });
    }
  }
  render () {
    return(
      <div>
        <input type="text" ref="text"/>
        <button onClick={this.select.bind(this)}>搜索</button>
        <Card showIndex={this.state.showIndex} zhuangtai={this.state.zhuangtai}/>
      </div>
    )
  }
}
export default Select;


//index.html

import React from 'react'
import ReactDOM from 'react-dom'
import Select from './Select.js'
import './main.css'
ReactDOM.render(<div>
  <Select />
</div>, document.getElementById('app'));

点击搜索就可以只显示能匹配到title的卡片，最好是可以用style的display:block或display:none来判断哪些显示哪些不显示，我只会用符合条件的，我给他重新构造出来这种笨方法，今天学了生命周期我以为可以试下但逻辑能力还是不行代码挺多但真的希望可以帮我解决一下