ReactJS子元素操纵1个组件中的子元素
问题描述：
我是React新手，很久以来一直在使用Jquery。所以不能使用React/Redux风格。ReactJS子元素操纵1个组件中的子元素
我一直坚持子元素尝试处理另一个子元素函数一段时间。
{this.state.stocks.map(function(data, index) {
return (
<div className={"list-group-item list-group-item-action flex-column align-items-start"} key={index}>
<div className={"d-flex w-100 justify-content-between"} onClick={this.handleToggle}>
<h5 className="mb-1">
<span className={styles.symbolTitle}>Stock Symbol:</span> <span className={styles.symbolName}>{data.symbol}</span> ${data.price}
<button type="button" className={"btn btn-outline-primary btn-sm "+ styles.btnTrans +""} >more...</button>
</h5>
<small>
{this.state.shares}
<span className={styles.colorGrey}>shares</span>
<button type="button" className={"btn btn-outline-success btn-sm "+ styles.btnTrans +""} onClick={this.handleBuy}>Buy</button>
<button type="button" className={"btn btn-outline-danger btn-sm "+ styles.btnTrans +""} onClick={this.handleSell}>Sell</button>
</small>
</div>
<div className={stateStyle}>
<small>Open Price: {data.open}</small>
<small>Highest Price: {data.high}</small>
<small>Lowest Price: {data.low}</small>
<small>All Price: {(data.low + data.high).toFixed(2)}</small>
<small>Volume: {data.volume}</small>
<small>Average Volume: {data.average_volume}</small>
<small>Volatility: {data.volatility}</small>
</div>
</div>
)
}.bind(this))}
就像我上面附上的那样，它是一系列divs的循环。我试图简单地切换具有onClick函数的div的兄弟div。然而，到目前为止我所得到的是函数handleToggle将切换在map函数下生成的所有div。切换功能如下：
handleToggle: function() {
if (this.state.active) {
this.setState({
active: false
})
} else {
this.setState({
active: true
})
}
},
不确定下一步该怎么做。你们能给我一些见解吗？
答
handleRowToggle(key)将切换所有与key值相关的对象。
handleButtonBuy(key)将递增存储在状态中的密钥buyCount值。
const data = [
{ id: 1, title : 'test1', value1: 'value11', value2: 'value21', buyCount: 0},
{ id: 2, title : 'test2', value1: 'value21', value2: 'value22', buyCount: 5},
{ id: 3, title : 'test3', value1: 'value31', value2: 'value32', buyCount: 10}
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
stocks: data
}
}
handleRowToggle(key) {
var allKeyRecords = document.querySelectorAll(`[data-toggle="${key}"]`);
allKeyRecords.forEach(record => record.classList.toggle('hide'))
}
handleButtonBuy(key) {
this.setState(function(prevState, props) {
const stocks = prevState.stocks.map(stock => {
if (stock.id === key) {
stock.buyCount++;
}
return stock;
});
// New state console logged
console.log(stocks);
// ES6 it's the same as stocks: stocks
return {
stocks
};
});
}
render() {
return (
<div>
<StockList
stocks={this.state.stocks}
handleRowToggle={this.handleRowToggle.bind(this)}
handleButtonBuy={this.handleButtonBuy.bind(this)}
/>
</div>
);
}
}
class StockList extends React.Component {
renderList() {
return this.props.stocks.map((stock) => {
return (
<tr
key={stock.id}
>
<td data-toggle={stock.id}>
{stock.id}
</td>
<td data-toggle={stock.id}>
{stock.title}
</td>
<td data-toggle={stock.id}>
{stock.value1}
</td>
<td data-toggle={stock.id}>
{stock.value2}
</td>
<td data-toggle={stock.id}>
{stock.buyCount}
</td>
<td data-toggle={stock.id}>
<button onClick={ (event) => this.props.handleButtonBuy(stock.id) }>Buy Me</button>
</td>
<td>
<button onClick={ (event) => this.props.handleRowToggle(stock.id) }>Toggle Row</button>
</td>
</tr>
);
});
}
render() {
return (
<table className="table">
<tbody>
{this.renderList()}
</tbody>
</table>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);tr td.hidden {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div id="root"></div>
答
您可以使用state中的active来选择性地显示元素。喜欢的东西：
{this.state.stocks.map(function(data, index) {
const summary = (
<div className={stateStyle}>
<small>Open Price: {data.open}</small>
<small>Highest Price: {data.high}</small>
<small>Lowest Price: {data.low}</small>
<small>All Price: {(data.low + data.high).toFixed(2)}</small>
<small>Volume: {data.volume}</small>
<small>Average Volume: {data.average_volume}</small>
<small>Volatility: {data.volatility}</small>
</div>
)
return (
<div className={"list-group-item list-group-item-action flex-column align-items-start"} key={index}>
<div className={"d-flex w-100 justify-content-between"} onClick={this.handleToggle}>
<h5 className="mb-1">
<span className={styles.symbolTitle}>Stock Symbol:</span> <span className={styles.symbolName}>{data.symbol}</span> ${data.price}
<button type="button" className={"btn btn-outline-primary btn-sm "+ styles.btnTrans +""} >more...</button>
</h5>
<small>
{this.state.shares}
<span className={styles.colorGrey}>shares</span>
<button type="button" className={"btn btn-outline-success btn-sm "+ styles.btnTrans +""} onClick={this.handleBuy}>Buy</button>
<button type="button" className={"btn btn-outline-danger btn-sm "+ styles.btnTrans +""} onClick={this.handleSell}>Sell</button>
</small>
</div>
{ this.state.active && summary }
</div>
)
}.bind(this))}
这样只会使summary元素（可以*选择一个更合适的名称），如果this.state.active是true。
你是什么意思'toggle'所有DIV的意思。你在做什么状态'active'被修改？ – Panther
@Panther正如你所看到的，在1父母中有2个div。第一个子div有一个onClick，我试图使用该div（作为一个按钮）切换下一个孩子（兄弟姐妹）。活动状态只是一个处理程序来修改显示/隐藏 – Yuhao
你可以同时打开多个'child' div吗？ – Panther