React ES6 onClick更改其他组件
我正在构建一个表，该表有一个普通行，然后是隐藏的两行，直到单击加号图标。单击图标时，它应该更改为减号，隐藏的行应该更改CSS类。也应该反过来起作用。
import React from 'react';
class HiddenRow extends React.Component {
render() {
return (
<tr className="hidden-row">
<td>Stuff</td>
</tr>
);
}
}
class NormalRow extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('here');
// Expand rows if hidden change icon to fa-minus-circle
// Hide rows if not and change icon to fa-plus-circle
}
render() {
return (
<tr>
<td><i className="fa fa-plus-circle" onClick={this.handleClick}></i> Hello</td>
</tr>
);
}
}
class ParentDiv extends React.Component {
render() {
return (
<div>
<table>
<tbody>
<NormalRow />
<HiddenRow />
<HiddenRow />
<NormalRow />
<HiddenRow />
<HiddenRow />
</tbody>
</table>
</div>
);
}
}编辑：表将有多组普通行和隐藏行。单击普通行中的图标只应切换两个直接隐藏的行。我用JQuery来做这件事，当我使用角度，但切换到反应。我一直在使用w/ JQuery作为解决方案。
回答 2
Stack Overflow用户
发布于 2016-03-19 14:26:51
您需要一种在NormalRow组件和两个HiddenRow组件之间进行通信的方法。在您的代码中，最好的方法是在ParentDiv中管理它，如下所示：
class ParentDiv extends React.Component {
constructor() {
this.state = {
displayHiddenRows: false
}
}
render() {
return (
<div>
<table>
<tbody>
<NormalRow onClick={this.handlePlusClicked.bind(this)} />
<HiddenRow show={this.state.displayHiddenRows} />
<HiddenRow show={this.state.displayHiddenRows} />
</tbody>
</table>
</div>
);
}
handlePlusClicked() {
this.setState = {
displayHiddenRows: true
}
}
}在隐藏的行中，通过展示道具为className添加一个条件。在普通行中，将handleClick替换为this.props.onClick函数。
Stack Overflow用户
发布于 2016-03-19 18:25:14
看起来，NormalRow和下面的几个HiddenRow是同一个控件的一部分。也就是说，我将考虑为它们创建一个单独的React组件，它将封装click事件处理以及底层“普通”和“隐藏”行的视图/隐藏逻辑。所有这些都可以在纯反应中实现(所以不需要jQuery )。
由新的、更高级别的组件生成的标记将是一个表行或三个表行，这取决于它的状态。但是由于render方法不能返回多个元素，所以您需要使用一个包装器，我的首选是<tbody> (相对于通常在这种情况下被误用的<div> )。据我所知，您可以在一个表中拥有任意数量的<tbody>标记，因此这将是一个有效的选择。
使用这个新组件(让我们称之为ActiveRow)，您的ParentDiv组件将如下所示：
class ParentDiv extends React.Component {
render() {
return (
<div>
<table>
<ActiveRow />
<ActiveRow />
</table>
</div>
);
}
}注意，我已经在这里删除了<tbody>包装器，因为它现在由ActiveRow返回。
https://stackoverflow.com/questions/36102827
复制相似问题
腾讯云开发者
