Javascript 是否将数据传递到渲染模式？

我不确定这是否可能，也许我做错了什么

我所拥有的是一个循环，它将一些进度条元素推送到数组中，然后使用信息对其进行渲染

单击不同的进度条将输出传递到该特定进度条的数据，但这将显示在控制台上

我不希望在控制台上输出它，而是希望该信息在

中动态弹出

因此，如果用户单击1号进度条，在1号进度条中传递的信息将显示在

中

如果我将

打开

功能放入

中，我会收到一个错误，提示： “无法在现有状态转换期间更新（例如在

渲染

）中）。渲染方法应该是道具和状态的纯函数。”

输出的照片 这是我的密码：

var React = require('react');
var Modal = require('react-overlays/lib/Modal');

var TableResults = React.createClass({

close(){
    this.setState({ showModal: false });
},
open: function(system, value, name, individualValues){
    this.setState({ showModal: true });
    console.log(system);
    console.log("Story: " + name);
    console.log("Value:" + individualValues);
    console.log("Total Output: " + value);
    console.log("=============================================");
},    


render: function(){
loop with logic and calculations{

    bodyRows[cellIndex].push(
       <td id="tableBody">
          <div className="progress" role="progressbar" id="progressBarStyle"
            onClick={this.open.bind(null, "System2", systemValues[0], name[0], individualSysValueOutput[0])}>
            <div className="progress-meter" data-values={this.calculatePercent(systemValues[0])}>
                {(Math.round(this.calculatePercent(systemValues[0]) * 100) / 100) + '%'}
            </div>
          </div>
       </td>
    )
}


return(
  <div>
      <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                {/* <td>{this.open()}</td> */}
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>


     <div className="dataTable" >
       <table className="hover">
         <tbody>
           <tr>
             {/* Progress bar will be rendered here */}
             {bodyRows[0]}
           </tr>
           <tr>
           </tr>
         </tbody>
       </table>
     </div>
  </div>
)
});
module.exports = TableResults;

var React=require（'React'）；
var Modal=require（'react-overlays/lib/Modal'）；
var TableResults=React.createClass({
关闭（）{
this.setState（{showmodel:false}）；
},
打开：函数（系统、值、名称、单个值）{
this.setState（{showmodel:true}）；
控制台日志（系统）；
console.log（“故事：+名称）；
console.log（“值：”+individualValues）；
console.log（“总输出：+值）；
console.log（“============================================================================”）；
},    
render:function（）{
带逻辑和计算的循环{
bodyRows[cellIndex]。推送(
{（Math.round（this.calculatePercent（systemValues[0]）*100）/100）+'%'}
)
}
返回(
头
保迪罗
{/*{this.open（）}*/}
{/*进度条将在此处呈现*/}
{bodyRows[0]}
)
});
module.exports=表格结果；

首先，当将组件上下文用作事件处理程序时，应将其绑定到

open

方法（使用

此
插入null作为第一个绑定参数）：

然后，您应该在以下状态中存储与单击的进度相对应的数据：

open: function(system, value, name, individualValues){
    this.setState({ showModal: true,
          system,
          value,
          name,
          individualValues
     });
}

现在您可以在模式中使用状态数据，如下所示：

 <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                <td>{this.state.value}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>


头
保迪罗
{this.state.value}
Ohhhh，我仍在学习ReactJS，状态/道具对我来说非常新。这让我对状态有了一个愉快的时刻。非常感谢！@BartekFryzowicz@Vincent不客气：）我很高兴能帮助你：）
 <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                <td>{this.state.value}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>