Question

我使用加载到状态的json对象构建了一个列表。

来自document.ready函数的li项目似乎无法访问。即将点击功能绑定到li是不起作用的。

但是，我可以绑定到我发现奇怪的父UL。

以下是我的列表组件：

$('#frames_list li').click(function() {
  alert('hello');
});

这是我的doc.ready代码：

import React from 'react';
import SideNavHeader from './SideNavHeader';
import SideNavAccordionMenu from './SideNavAccordionMenu';
import SideNavFooter from './SideNavFooter';

var framesData, albumsData, channelsData;

$.getJSON("/json/frames.json", function(frames){
    framesData = frames;
});
$.getJSON("/json/albums.json", function(albums){
    albumsData = albums;
});
$.getJSON("/json/channels.json", function(channels){
    channelsData = channels;
});

var SideNav = React.createClass({
  getInitialState() {
    return {
      frames: [],
      albums: [],
      channels: []
    };
  },
  componentDidMount() {
    var framesList = [], albumsList = [], channelsList = [];
    // Fake an AJAX request with a setTimeout function
    setTimeout(function(){ 
      framesList=framesData.frames;
      albumsList=albumsData.albums;
      channelsList=channelsData.channels;
      // Set state when the request completes
      this.setState({
        frames: framesList,
        albums: albumsList,
        channels: channelsList
      });
    }.bind(this), 10);
  },
  render() {
    return (
      <section>
        <SideNavHeader />
        <SideNavAccordionMenu frames={this.state.frames} albums={this.state.albums} channels={this.state.channels} />
        <SideNavFooter />
      </section>
    );
  }
});

module.exports = SideNav;

以下是父组件设置状态：

  $issue_name = $this->input->post('issue_name');
  $issue_tagline = $this->input->post('issue_tagline');
  $issue_description = $this->input->post('issue_description');
  $issue_publish_on = $this->input->post('issue_publish_on');
  $issue_file = $this->input->post('issue_file');

$data2=array(
  'issue_name' => $issue_name,
  'issue_tagline' => $issue_tagline,
  'issue_description' => $issue_description,
  'issue_file' => $issue_file,
 ); 

$this->load->helper('form');
$this->load->view('issue_detail',$data2);


  echo '<pre>' .var_dump($issue_name).'</pre>';

  $target_url = 'https://platform.twixlmedia.com/admin-api/1/upload';

  $file_name_with_full_path = realpath($issue_file);
  $post3 = array(
'admin_api_key'    => 'da06751194bc18cc60xxxxxxx',
'app_key'          => 'bd7cf04226c58723cxxxxxx',
'issue_identifier' => $productid,
'issue_file'       =>'@' . realpath($issue_file),
'issue_name'       => $issue_name
  );

$ch3 = curl_init();
curl_setopt($ch3, CURLOPT_URL, 'https://platform.twixlmedia.com/admin-api/1/upload');
curl_setopt($ch3, CURLOPT_POST, 1);
curl_setopt($ch3, CURLOPT_POSTFIELDS, $post3);
curl_setopt($ch3, CURLOPT_RETURNTRANSFER, 1);
$result3 = curl_exec($ch3);
curl_close ($ch3);
echo $result3;

Answer 1

您不希望在DOM中附加Click侦听器。 React会对你的DOM做一些事情，包括破坏节点和创建新节点。这可能会破坏与特定节点相关联的侦听器，这些节点可能会消失。

在这种情况下，您可能希望在JSX中使用React的内置onClick属性，如in the docs所示。

尝试类似：

import React from 'react';

var Albums = React.createClass({
  handleClick(event) {
    console.log('li was clicked');
  },

  render() {
    return (
      <ul id="frames_list">
        {this.props.frames.map(function(frames){
          return (
            <li key={frames.frameId} onClick={this.handleClick}>
              <Link to="/frames" >{frames.frameName}</Link>
            </li>
          )
        }.bind(this))}
      </ul>
    )
  }
});

module.exports = Albums;

顺便说一句，为了清楚起见，我个人喜欢将项目映射分解为自己的功能：

import React from 'react';

var Albums = React.createClass({
  handleClick(event) {
    console.log('li was clicked');
  },

  renderFrames() {
    return this.props.frames.map(frame => {
      return (
        <li key={frame.frameId} onClick={this.handleClick}>
          <Link to="/frames" >{frame.frameName}</Link>
        </li>
      );
    });
  },

  render() {
    return (
      <ul id="frames_list">
        {this.renderFrames()}
      </ul>
    )
  }
});

module.exports = Albums;

Answer 2

如果你真的想使用jquery事件监听器，你必须在ComponentDidMount函数中绑定你的click事件（在你的Albums组件中）

React - 动态列表<li>在doc.ready中无法访问，但<ul>是？

2 个答案: