相关疑难解决方法(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);
};

但它表现出同样的问题.

如何访问正确的对象？

我从React.js开始,我想做一个简单的表单,但在文档中我找到了两种方法.

在第一种是使用参考文献:

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

和第二个是使用状态的阵营部件内部:

var TodoTextInput = …

我收到此错误Uncaught TypeError:每当我在AuthorForm的输入框中输入任何内容时,都无法读取未定义的属性'state'.我正在使用React和ES7.

在ManageAuthorPage中的setAuthorState函数的第3行发生错误.即使我在setAuthorState中放置了console.log(this.state.author),它也会停在console.log并调出错误.

无法通过互联网找到其他人的类似问题.

这是ManageAuthorPage代码:

import React, { Component } from 'react';
import AuthorForm from './authorForm';

class ManageAuthorPage extends Component {
  state = {
    author: { id: '', firstName: '', lastName: '' }
  };

  setAuthorState(event) {
    let field = event.target.name;
    let value = event.target.value;
    this.state.author[field] = value;
    return this.setState({author: this.state.author});
  };

  render() {
    return (
      <AuthorForm
        author={this.state.author}
        onChange={this.setAuthorState}
      />
    );
  }
}

export default ManageAuthorPage 

这是AuthorForm代码:

import React, { Component } …

我在这里看到了许多关于同一问题的问题,但它似乎与我遇到的问题无关,而且有点复杂.

我正在学习ReactJS和React Native.我正在阅读并遵循"Learning React Native"一书中的代码示例:https://github.com/bonniee/learning-react-native

出于某种原因,当调用handleTextChange函数时,在下面的代码中调用this.setState会导致"this.SetState不是函数".错误.我的问题是为什么？与关于同一问题的其他问题不同,我不相信我对this.stateState的调用隐藏在回调函数或if语句中.为什么不定义？

这是我的代码:

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: "",
      forecast: null
    };
  }

  _handleTextChange(event) {
    this.setState({zip: event.nativeEvent.text});
  }

    render() {
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>
      You input {this.state.zip}.
      </Text>
      <TextInput
      style={styles.input}
      onSubmitEditing={this._handleTextChange}/>
      </View>
    );
  }
}

我正在使用onsenui制作列表并做出反应.但我无法通过onchanged调用绑定.

我想不出来......有人能解决这个问题吗？

这是我的代码.我想从输入项调用handlechanged方法.但是,然后,无法读取属性'bind'的undefined被提出.

export default class MainPage extends React.Component {


  constructor(props) {
      super(props);
      this.state = {
        selectedValue: "myself",
        destinations: ["myself","somebody"],
      };
  }


  handleChange(value) {
    this.setState({selectedValue: value});
  }

  renderRadioRow(row) {
    return (
      <ListItem key={row} tappable>
        <label className='left'>
          <Input
            inputId={`radio-${row}`}
            checked={row === this.selectedValue}
            onChange={this.handleChange.bind(this, row)}
            type='radio'
          />
        </label>
        <label htmlFor={`radio-${row}`} className='center'>
          {row}
        </label>
      </ListItem>
    )
  }

  render() {
    return (
      <Page renderToolbar={this.renderToolbar}>
        <p style={{textAlign: 'center'}}>
          test
        </p>

        <List
          dataSource={this.state.destinations}
          renderRow={this.renderRadioRow}
        />
      </Page>
    );
  }
}

我正在将React组件更新到ES6并遇到此问题中描述的问题 - 无法在事件处理程序中访问React实例(this) - 即不绑定到组件实例.

这是有道理的,当然也有效,但我对答案的另一部分感到困惑:

请注意,绑定函数会创建一个新函数.您可以直接在render中绑定它,这意味着每次组件渲染时都会创建一个新函数,或者在构造函数中绑定它,这只会触发一次.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

Run Code Online (Sandbox Code Playgroud)

VS

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

Run Code Online (Sandbox Code Playgroud)

我假设构造函数中的绑定是性能等的首选方法,但你知道他们对假设的看法!

这两种方法的权衡取舍是什么？有没有一个人肯定比另一个好？或者没关系？

所以我开始将我的应用程序从ES2015转换为使用React的ES6.

我有一个父类和一个像这样的子类,

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: ''
        };
    }

    setCodeChange(newCode) {
        this.setState({code: newCode});
    }


    login() {
        if (this.state.code == "") {
            // Some functionality
        }
    }

    render() {
        return (
            <div>
                <Child onCodeChange={this.setCodeChange} onLogin={this.login} />
            </div>
        );
    }
}

儿童班,

export default class Child extends Component {
    constructor(props) {
        super(props);
    }

    handleCodeChange(e) {
        this.props.onCodeChange(e.target.value);
    }

    login() {
        this.props.onLogin();
    }

    render() {
        return (
            <div>
                <input name="code" onChange={this.handleCodeChange.bind(this)}/>
            </div>
            <button id="login" …

你不应该在react属性中使用匿名函数,例如

<a onClick=()=>doIt('myId')>Aaron</a>

我理解为什么这会为React的协调创建性能问题,因为在每个渲染过程中都会重新创建匿名函数,因此总会触发某种真正的DOM重新渲染.我的问题是,对于一个小组件(即不是每一行都有链接的表)这是微不足道的吗？我的意思是,React足够智能只是为了替换处理程序,而不是重新渲染DOM,对吧？所以成本不是那么高？

我知道讨论范围问题的类似线程.

使用以下组件

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            counter: 0
        }
    }

    addMore() {
        this.setState({
            counter: this.state.counter + 1
        });
    }

    render() {
        return (

            <div onClick={ this.addMore }>
                <p>counter: { this.state.counter }</p>
            </div>

        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

当你点击div你得到Cannot read property 'setState' of null

我知道你可以做的事情,this.addMore.bind(this)但所有这些似乎是奇怪的额外样板代码风格代码只是为了使它工作.

什么被认为是最优雅的方式？当然,除了眼睛疼痛外,人们必须有一种优先的方式才能获得益处吗？

我在 react native 中有一个组件：

export default class Screen extends Component {
  constructor(props){
    super(props);
    this.state = {
      prop1: false,
      prop2: simpleFunc
    };
  }
  simpleFunc = () => { /*...*/ }

  componentWillMount() {
      BackgroundGeolocation.on('location', this.onLocation);

最后一行是将在新位置调用的回调方法。
从该方法我无法访问this.state或this.simpleFunc().

我应该怎么做才能从回调函数更新状态？