Question

我已经将一个组件从createClass重写为类定义以适应eslint-react-native linting，然后我发现我不能像以前那样将函数绑定到Array中的元素。前面的代码如下所示：

$myModel = new ModelClass($params);
$myModel->save();

当我将其更改为类定义时：

if (! empty($myModel->id)) {
    // Model has been successfully inserted
}

它不再起作用。按下Touchable：createClass({ render() { return ( <ListView style={styles.listView} dataSource={this.state.data} renderRow={this._renderTopic} /> ) }, _renderTopic(topic) { return ( <TouchableHighlight onDelayColor="#dddddd" onPress={() => this._jumpTo(topic.id) } > ) }, _jumpTo(id) { this.props.navigator.push({ name: 'Topic page', component: Topic, passProps: { topicId: id, }, }); } })

时出错

所以我又改了一遍：

{
  render() {
    return (
      <ListView style={styles.listView}
        dataSource={this.state.data}
        renderRow={this._renderTopic}
      />
    )
  }
  _renderTopic(topic) {
    return (
      <TouchableHighlight onDelayColor="#dddddd"
        onPress={() => this._jumpTo(topic.id) }
      >
    )
  }
  _jumpTo(id) {
    this.props.navigator.push({
      name: 'Topic page',
      component: Topic,
      passProps: {
       topicId: id,
      },
    });
  }
}

这会立即出错：this2._jumpTo is not a function。（这里很奇怪，jumpTo函数应该是懒惰的，对吗？）

那么将动态函数绑定到ListView中的项目的正确方法是什么？

Answer 1

我认为whitep4nther朝着正确的方向前进，我做了以下几点来解决渲染方法中的绑定问题

```

{
  constructor(props) {
    super(props);
      this._renderTopic = this._renderTopic.bind(this);
  }
}

```

从文档https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

中查看此链接

Answer 2

第二个例子，疯狂猜测？

renderRow={this._renderTopic.bind(this)}

Answer 3

您需要将此绑定到方法

<ListView
   dataSource={this.state.dataSource}
   renderRow={this._renderTopic.bind(this)}
/>

并在构造函数中添加_renderTopic方法：

constructor(props) {
  super(props);
  this._renderTopic = this._renderTopic.bind(this);
}

Answer 4

如果使用react类构造函数然后使用箭头函数，则不必绑定此子项。

这是可能的，因为箭头函数不会像函数那样创建闭包。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: "Some content"
    };
  }
  clickHandler = event => {
    //handle the click
  };
  render() {
    return (
      <div>
        <p> Some Content </p>
        <button onClick={this.clickHandler}> Click Me</button>
      </div>
    );
  }
}

如何在React Native中为ListView中的每个元素绑定函数？

4 个答案: