ReactJS子元素操縱1個組件中的子元素

Question

我是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}&nbsp;&nbsp; 
       <button type="button" className={"btn btn-outline-primary btn-sm "+ styles.btnTrans +""} >more...</button> 
      </h5> 
      <small> 
       {this.state.shares}&nbsp; 
       <span className={styles.colorGrey}>shares</span>&nbsp;&nbsp;&nbsp;&nbsp; 
       <button type="button" className={"btn btn-outline-success btn-sm "+ styles.btnTrans +""} onClick={this.handleBuy}>Buy</button>&nbsp;&nbsp; 
       <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>&nbsp; 
       <small>Highest Price: {data.high}</small>&nbsp; 
       <small>Lowest Price: {data.low}</small>&nbsp; 
       <small>All Price: {(data.low + data.high).toFixed(2)}</small>&nbsp; 
       <small>Volume: {data.volume}</small>&nbsp; 
       <small>Average Volume: {data.average_volume}</small>&nbsp; 
       <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 
     }) 
    } 
    }, 

不確定下一步該怎麼做。你們能給我一些見解嗎？

Answer 1

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>

Answer 2

您可以使用state中的active來選擇性地顯示元素。喜歡的東西：

{this.state.stocks.map(function(data, index) { 
    const summary = (
     <div className={stateStyle}> 
      <small>Open Price: {data.open}</small>&nbsp; 
      <small>Highest Price: {data.high}</small>&nbsp; 
      <small>Lowest Price: {data.low}</small>&nbsp; 
      <small>All Price: {(data.low + data.high).toFixed(2)}</small>&nbsp; 
      <small>Volume: {data.volume}</small>&nbsp; 
      <small>Average Volume: {data.average_volume}</small>&nbsp; 
      <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}&nbsp;&nbsp; 
       <button type="button" className={"btn btn-outline-primary btn-sm "+ styles.btnTrans +""} >more...</button> 
      </h5> 
      <small> 
      {this.state.shares}&nbsp; 
      <span className={styles.colorGrey}>shares</span>&nbsp;&nbsp;&nbsp;&nbsp; 
      <button type="button" className={"btn btn-outline-success btn-sm "+ styles.btnTrans +""} onClick={this.handleBuy}>Buy</button>&nbsp;&nbsp; 
      <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。