1
569//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(
)
});
return (
{baiRbai}
)
}
}
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(
)
}
}
export default Select;
//index.html
import React from 'react'
import ReactDOM from 'react-dom'
import Select from './Select.js'
import './main.css'
ReactDOM.render(
, document.getElementById('app'));
点击搜索就可以只显示能匹配到title的卡片，最好是可以用style的display:block或display:none来判断哪些显示哪些不显示，我只会用符合条件的，我给他重新构造出来这种笨方法，今天学了生命周期我以为可以试下但逻辑能力还是不行
代码挺多但真的希望可以帮我解决一下
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
有些设计概念问题，上层下层的关系都乱了套了。Card是指一列列的资料是吧？Select是左边那个搜寻列是吧？
你把Card组件(元件)嵌套在Select组件(元件)中，Select组件(元件)作为上层，就不该在Card组件中作Value的map逻辑，而是在Select里作。比较佳的建议是提升一个上层元件，Select与Card都在其中。
其次，你在Select中的select这个方法是要搜寻用的，是个事件方法，理应要传入event参数值，由此判断事件的传入值，而不是用
$(this.refs.text).val()来取值，这区块就不太正确。参考一下，重写过再来问。