相关疑难解决方法(0)

我有一个构造函数,它注册一个事件处理程序:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

但是,我无法data在回调中访问已创建对象的属性.它看起来this并不是指创建的对象,而是指另一个对象.

我还尝试使用对象方法而不是匿名函数:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

但它表现出同样的问题.

如何访问正确的对象？

我想在一些嵌入式html中调用一个函数.我尝试了以下但是没有调用该函数.这是在render方法中调用函数的错误方法吗？

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}

我尝试将一个函数传递给我的子组件.对于每个子组件,当用户单击它们时,将调用onclick函数.此onclick函数将写入父组件.

父组件:

class AgentsList extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(e) {
    e.preventDefault();
    console.log(this.props);
  }

  render() {
    const { agents } = this.props;

    ...

    var agentsNodes = agents.map(function(agent, i) {
      if(agent.id_intervention == "") {
        return (
          <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />
        );
      }
    });
    return (
      <div id="agents">
        <div className="agents-title">
          <h3>Title</h3>
        </div>
        {agentsNodes}
      </div>
    );
  }
}

子组件:

class Agent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { agent, t } = this.props;

    return …

我正在从teamtreehouse.com制作一个非常基本的React应用程序,而且我经常遇到

"TypeError:无法读取未定义的属性'onPlayerScoreChange'"

即使我正确绑定我的功能(我认为)

'onPlayerScoreChange'Grandparent组件中的一种方法,当用户点击"+"或" - "按钮更改玩家的分数时执行该方法.

如果有人可以解释错误,那将是非常有帮助的,因为我认为我正在设置this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this)伟大的祖父母的构造函数.

父组件:

class App extends React.Component {
constructor(props) {
    super(props);
    this.onPlayerScoreChange = this.onPlayerScoreChange.bind(this)
    this.state = {
        initialPlayers: props.initialPlayers,
    };
}

onPlayerScoreChange(delta, index) {
    this.setState((prevState, props) => {
        return {initialPlayers: this.prevState.initialPlayers[index].score += delta}
    })
}

render() {
    return(
        <div className = "scoreboard">
            <Header title = {this.props.title}/>
            <div className = "players">
                {this.state.initialPlayers.map(function(player, index) {
                    return(
                        <Player 
                        name = {player.name} 
                        score = {player.score} 
                        key = {player.id} 
                        index = {index}
                        onScoreChange = …

我有我的表视图.我有posfields通过使用map函数完善显示.但我的问题是当我试图在posfields map函数中映射td时它向我抛出错误"未定义的''标题'".

{
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}

1日有反应,我没有看到一个办法让<按钮>的onClick = {} this.props.handleClickPlay>播放</按钮>播放音频.如果我在{audioListNodes}下移动它按钮工作正常.我想让每个链接最终播放一个单独的音频文件,但是现在只是播放同一个文件是一个胜利,但将事件处理程序移动到列表中会将其杀死.我假设它是因为这不再引用AudioList而是var数据？一旦我按下按钮,我如何识别单击哪个按钮并更改AudioObject源？

    var data = [
    {voice: "Drew", file:"Drew.mp3", volume: 90},
    {voice: "Chris", file:"Chris.mp3", volume: 85},
    {voice: "Patrick", file:"Patrick.mp3", volume: 85},
    {voice: "Everett", file:"Everett.mp3", volume: 60},
    ];

    var AudioList = React.createClass({
      render: function() {
        var audioListNodes = this.props.data.map(function(el, index) {
          return (
            <div author={el.voice}>
              {el.file}
                <button onClick={this.props.handleClickPlay}>Play</button>
            </div>
          );
        });  
        return (
          <div className="audioList">
            {audioListNodes}
          </div>
        );
      }
    });
    var AudioObject = React.createClass({
        play: function () {
            var audio = this.getDOMNode();
            audio.load();
            audio.play();
        },
        render: function() {
            return …

只是想让这些视频在鼠标悬停时播放。我可以从控制台看到我需要创建一个函数而不是使用字符串（其他SO答案使用字符串），那么如何在不创建太多额外代码的情况下做到这一点？理想情况下，我希望在 onMouseOver 和 onMouseOut 属性上设置正确的功能。

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver="this.play()" \n          onMouseOut="this.pause();this.currentTime=0;"\n          src={`${vid.videos.tiny.url}#t=1`}\n        </video>\n

也尝试过

        <video \n          poster="https://i.imgur.com/Us5ckqm.jpg"\n          onMouseOver={() => this.play()}\n          onMouseOut={() => this.pause()}\n          src={`${vid.videos.tiny.url}#t=1`} >\n        </video>\n

这给了我错误：无法读取未定义的属性“play”。

编辑不确定这是否相关，但上面的代码驻留在地图函数内，该函数也是 get 请求的一部分。这是完整的功能：

  const fetchVideos = async (amount, category) => {\n    const response = await axios.get(\'https://pixabay.com/api/videos/\', {\n      params: {\n        key: \'123456123456123456\',\n        per_page: amount,\n        category: category\n      }\n    })\n    console.log(response)\n    const vidsAsHtml = response.data.hits.map(vid => {\n      return (\n        <div className={`${props.page}--grid-content-wrapper`} key={vid.picture_id}>\n          <div className={`${props.page}--grid-video`}>\n            <video className=".video"\n              poster="https://i.imgur.com/Us5ckqm.jpg"\n              onMouseOver={() => …