如何在 react-native 中正确绑定？

Question

I'm try to update the state from a function, but I don't find the correct form to bind the scope. My code (I am working with native-base components):

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

First option, bind it in constructor

Example

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

Second option, bind it inline

Example

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

Third option, use arrow functions

Example

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

Answer 2

My recommendation would be to read this: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 Helps a lot with understanding binding options you have and why one or other might be better in your case.

I suggest to go with binding in constructor :

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

Answer 3

self mental note, "Bind is dummy if I not use the context of the function"

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}
        />
    );
  }