Question

我正在使用反应的这种配置

"react": "~15.4.0",
"react-dom": "~15.4.0",
"react-redux": "~5.0.4",
"react-router": "~4.1.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "~5.0.0-alpha.6",
"redux": "^4.0.0",

并有一个处理请求的路由器和子路由器

高阶路由器是此代码

const   StupidRouter       =({ children, options }) => {
                            return    (<div>  {  React.Children.map( ( typeof   children === 'function' ?  { children:[] } :  children ), child => React.cloneElement(child, {  key: child.props.name,  context: 'registration',  }) )}
                                            <Route path="/" render={() => <Master  options={options }   >  
                                                                            <Switch>
                                                                                {React.Children.map(children, child =>  ( <Route path={'/' + child.props.name  } render={props =>   React.cloneElement(child, { context: 'route',  ...props,  })} key={child.props.name} />  ))}
                                                                            </Switch> 
                                                                        </Master>      
                                                                        } />
                                    </div>) 
 }

低阶路由器就是这样

<Switch>
 {this.props.list   && ( <Route exact path={this_.props.match.url                   } render={props => ...
 {this.props.edit   && ( <Route exact path={this_.props.match.url + '/:id'          } render={props => ...
</Switch>  )

然后将调用包含按钮和其他项目的组件。（此代码为以下代码的缩写）

return   (<div  >
          <div   style={{ display: 'block' ,paddingTop : 12 }}>
          <IconTexBut text={ this.state.today}  onClick={e=> this.handleClick(e) } />
        </div> 
          {   setDay[   props.Day].open  && ...





         <Popover open={ setDay[  props.Day].open }  coords={props.coords}
           <Tspan type={'div'} width={195} rgb = { [0, 188, 212]}  >  
              { <div style={{ color:'#00bcd4'   }} > {' HR   :  MIN [ OnOff ] '}</div>}
              { <Tspan ><Tinput value={+this.state.Hour  || 0 } itype ={'number' } onCha
              { <Tspan ><Tinput value={+this.state.Mins  || 0 } itype ={'number' } onCha
              { <IconButton    options={this.props.options}  icon={  this.state.OnOff   
              {<RaisedButton  onClick={e=>{   
                               setDay[  props.Day]. open = f
                              this.handleHM( { Hour :  this.state.Hour, Mins :  this.sta
                              } } primary    label={ 'Yes' }  /> }
              {<RaisedButton  onClick={e =>{ 
                               setDay[  props.Day]. open = f
                              this.setState({open: false }) }}    secondary    label={ '
          </Tspan>
          </Popover>  }



        <div style={{ display: 'block' ,paddingTop : 12 }}>
        <table  style={{margin : 0, padding : 0}}><tbody> 
         <tr><td> &nbsp;</td></tr>
          <tr><td>{ this.state.HMCol.length > 0  ? this.getRow(0 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 1  ? this.getRow(1 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 2  ? this.getRow(2 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 3  ? this.getRow(3 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 4  ? this.getRow(4 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 5  ? this.getRow(5 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 6  ? this.getRow(6 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 7  ? this.getRow(7 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 8  ? this.getRow(8 ) : <svg   style={{ dis
          <tr><td>{ this.state.HMCol.length > 9  ? this.getRow(9 ) : <svg   style={{ dis
      </table>
      </div>
    </div>)

在那些组件中，我称为呈现字段的本地控制（在组件中）弹出框。

问题是这些本地组件（在弹出窗口中呈现）无法接收onclick事件，但可以接收onMouseDown事件。

在每种配置中，这种行为都是如此可预测的可重复性：路由器确定一个呈现页面的子路由（然后不使用该路由器呈现弹出窗口组件），我确定这是一个错误。发送了onMouseDown事件，但onClick神秘地消失了？？？

但是当我打开一个github bug报告时，它被“声明式”关闭，并被告知在这里回答这个问题（我在这里使用“声明式”这个词作为对“即兴”的委婉说法，因为声明式是React似的，概括地暗示了粗鲁和愚昧的行为：|）。

因此发生了几件事之一。 React Router 4.0都存在一些非常严重但已知的事件管理问题，这些问题未得到记录，因为它们是如此严重，以至于希望保持安静。还是有些非常自大的人正在管理他们的github问题；或者存在一些众所周知的要求，即对所有组件（即使是在现场渲染）都使用React Router 4.0是众所周知的；还是我犯了一些非常头疼的错误，这使我花了两个星期的时间将其移植到4.0。

附带地，该行为仅始于4.0。 3.0工作正常。

我已经尝试了ui组件，boot-strap组件和其他组件。似乎每个人都放弃了这个问题，并实现了一个单独的dom实例来管理模式对话框（这相当于实例化一个单独的html页面来解决问题...这是一个很大的hack，我真的无法想象这是唯一的解决方案或具有响应性的路由器将发布，而没有一些很好的示例来说明如何避开此ahem功能）

任何指导将不胜感激

反应4.0子组件点击事件不触发

0 个答案: