我是这里的React新手，已经和Jquery合作了很长时间。因此无法使用React / Redux风格。
我一直坚持使用子元素尝试处理另一个子元素函数一段时间。{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))}
就像我上面附上的那样，它是一系列div的循环。我试图在具有onClick功能的div上简单地切换兄弟div。但是，到目前为止我得到的函数handleToggle将切换在map函数下生成的所有div。切换功能如下：
handleToggle: function() {
if (this.state.active) {
this.setState({
active: false
})
} else {
this.setState({
active: true
})
}
},
不确定下一步该怎么做。你们能给我一些见解吗？
答案 0 :(得分：0)
您可以使用active中的state来有选择地显示元素。类似的东西：
{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元素（随意选择更合适的名称）。
答案 1 :(得分：0)
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>