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

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

3 个答案: