怎么控制style的方法完成react的搜索功能

Question

//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来判断哪些显示哪些不显示，我只会用符合条件的，我给他重新构造出来这种笨方法，今天学了生命周期我以为可以试下但逻辑能力还是不行代码挺多但真的希望可以帮我解决一下

Answer 1

有些设计概念问题，上层下层的关系都乱了套了。Card是指一列列的资料是吧？Select是左边那个搜寻列是吧？

你把Card组件(元件)嵌套在Select组件(元件)中，Select组件(元件)作为上层，就不该在Card组件中作Value的map逻辑，而是在Select里作。比较佳的建议是提升一个上层元件，Select与Card都在其中。

其次，你在Select中的select这个方法是要搜寻用的，是个事件方法，理应要传入event参数值，由此判断事件的传入值，而不是用$(this.refs.text).val()来取值，这区块就不太正确。

参考一下，重写过再来问。