如何在反应原生中正确绑定

Question

我尝试从函数更新状态，但我找不到绑定作用域的正确形式。我的代码(我正在使用本机基础组件(：

export default class MenuScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  _renderRow() {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }
  render() {
    return (
         <SectionList
          sections={[...]}
          renderItem={this._renderRow}
        />
    );
  }

Answer 1

第一个选项，将其绑定到构造函数中

例

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

第二个选项，内联绑定

例

     <SectionList
      sections={[...]}
      renderItem={this._renderRow.bind(this)}
    />

第三个选项，使用箭头函数

例

renderRow = () => {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { this.setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }

Answer 2

我的建议是阅读以下内容：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56有助于了解您拥有的绑定选项以及为什么一个或另一个在您的情况下可能更好。

我建议在constructor中使用绑定：

export default class MenuScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleChange = this.handlePress.bind(this);
  }
...

Answer 3

自我心理注释，"如果我不使用函数的上下文，绑定是虚拟的">

export default class MenuScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    **this._renderRow = this._renderRow.bind(this);**
    }
  _renderRow() {
    return (
      <ListItem avatar onPress={() =>
         ActionSheet.show(
           {options: BUTTONS
           }, buttonIndex => { **this.**setState({ clicked:  BUTTONS[buttonIndex]})}
         )}
       >
      </ListItem>
    );
  }
  render() {
    return (
         <SectionList
          sections={[...]}
          renderItem={this._renderRow}
        />
    );
  }