reactjs - Props 父组件到一个父子组件
问题描述
如何从子组件(Card)调用父组件(App)中的函数?
Card 组件渲染一个项目(CHILD)
const Card = (props) => {
return (
<div style={{margin: '1em'}}>
<img alt="Profile" width="75" src={props.avatar_url} />
<div style={{display: 'inline-block', marginLeft: 10}}>
<div style={{fontSize: '1.25em', fontWeight: 'bold'}}>
{props.name}
</div>
<div>{props.company}</div>
<button
//when I click here should trigger App's delete func who deletes the select item.
onClick = { () => alert()}
className="btn btn-danger btn-sm">Delete</button>
</div>
</div>
);
};
CardList 组件呈现项目列表(CHILD-PARENT)
const CardList = (props) => {
return (
//Props.nameProp = Value {...Card} spred operator
<div>
{props.cards.map(card => <Card key={card.id} {...card} />)}
</div>
);
}
父组件:
class App extends React.Component {
state = {
cards: [
]
};
addNewCard = (cardInfo) => {
this.setState(prevState => ({
cards: prevState.cards.concat(cardInfo)
}))
};
deleteCard = (selectedCard) => {
this.setState(prevState => ({
//array.filter creates a new array with elements who pass the foo
cards: prevState.cards.filter(card => card !== selectedCard)
}));
}
render(){
const {
cards,
} = this.state;
return(
<div className="container" style={{marginTop: 15}}>
<Form onSubmit={this.addNewCard} />
<div className="container" style={{padding: 20}}>
{
cards.length > 0 ?
<CardList cards={cards} />
:
<p>Your list is empty</p>
}
</div>
</div>
);
}
}
解释
我想删除状态列表中的项目,但该列表在父组件中,我该怎么做?
解决方案
您可以将deleteCard
方法作为道具传递给CardList
, 和 fromCardList
到每个Card
组件并在那里调用它。
例子
const Card = props => (
<button onClick={() => props.deleteCard(props.card)}>{props.card}</button>
);
const CardList = props => (
<div>
{props.cards.map(card => (
<Card card={card} deleteCard={props.deleteCard} />
))}
</div>
);
class App extends React.Component {
state = {
cards: [1, 2, 3]
};
deleteCard = card => {
this.setState(({ cards }) => ({
cards: cards.filter(element => element !== card)
}));
};
render() {
const { cards } = this.state;
return <CardList cards={cards} deleteCard={this.deleteCard} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
推荐阅读
- java - 验证简单 for/lambda 比较的 JMH 测量值
- reactjs - React 将数据从映射的子组件传递到新组件
- python - Python - 将信息添加到另一个文件中的列表
- javascript - 无法渲染父道具
- android-gradle-plugin - 什么是仅测试模块中的等效 androidTestUtil
- javascript - 接受自身的糖化打字稿类构造函数?
- javascript - 在页面刷新时重置状态对象
- android - 当我尝试使用 android-image-cropper:2.8.+ 时我被卡住了
- java - 如何在 Java 中编译片段和 AppCompatActivity?
- c - 我的老师告诉我我的代码是垃圾,为什么?