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

//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: "rgba0, 0, 0, 0.156863 3px 3px 10px, rgba0, 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.mapitem,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=RegExptext; if pat.testValue[i].title { item.pushi; } } if item.length>0 { this.setState{ showIndex:item, zhuangtai:true }; } } render { return <div> <input type="text" ref="text"/> <button onClick={this.select.bindthis}>搜索</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.getElementByIdapp; 

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

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

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注