ReactJS 子元素在 1 个组件中操作子元素

debugcn 发表于 Dev

Yuhao

我是这里的 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))}

就像我上面附加的那样，它是一系列 div 循环。我正在尝试简单地切换具有 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存储在 state 中的键值。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。