Question

＆＃13;

<!DOCTYPE html>
<html>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline;
  }
  #outer {
    margin-left: 20%;
  }
  #icon {
    display: inline;
  }
</style>

<head lang="en">
  <meta charset="UTF-8">
  <title>React Image Slider</title>
  <script src="https://fb.me/react-0.13.1.js"></script>
  <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
</head>

<body>
  <script type="text/jsx">
    var Slider = React.createClass({ changeImage: function(e){ console.log("i m here"); }, render: function () { var lib = this.props.imageData; return
    <div>
      <div id="outer">
        <img src="http://placehold.it/300x300" width="300" height="300" />
      </div>
      <ul>
        {lib.map(function(l){ return
        <li>
          <div id="icon">
            <input type="image" onClick={ this.changeImage} src={l.icon} alt="Submit" width="100" height="100" /> <span>{l.name}</span>
          </div>
        </li>
        }) }
      </ul>
    </div>; } } ); 
var arr_img = [ { name: 'Image1', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'}, { name: 'Image2', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'}, { name: 'Image3', url: 'http://placehold.it/940x528',
    icon: 'http://placehold.it/100x100'}, { name: 'Image4', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'}, { name: 'Image5', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'}, { name: 'Image6', url: 'http://placehold.it/940x528',
    icon: 'http://placehold.it/100x100'}, { name: 'Image7', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'}, { name: 'Image8', url: 'http://placehold.it/940x528', icon: 'http://placehold.it/100x100'} ]; 
React.render(
    <Slider imageData={ arr_img} />, document.body );

  </script>
</body>

</html>

＆＃13;

Answer 1

问题是当你传入this.changeImage时，// Add `this` as a second parameter lib.map(function(l){ }, this);将是未定义的，因为你需要设置你传递给map的函数的范围：

{{1}}

我应该说，这与没有与简单的JavaScript有关。

onClick事件不会触发reactjs

1 个答案: