如何在 React Native 中更改列表视图中按钮的文本？

Question

我想在点击后快速更改列表视图中按钮的文本吗？

我正在尝试使用以下代码来实现此功能，但我无法做到，即它无法正常工作。我该怎么做？请帮忙

constructor(props) {
    super(props);
    this.state = {
      button_text:"Connect",
    }
  }

  ConPressed() {
    this.setState({
      button_text: "Connected",
    });
  }

  render() {
    return (
      <ListView
        dataSource={this.state.sa}
        renderRow={(rowData) => 

       <TouchableHighlight onPress={() => this.ConPressed()}>
          <Text>{this.state.button_text}</Text>
       </TouchableHighlight>

      />
    );
  }

Answer 1

将 ConPressed() 绑定到作用域。

constructor(props) {
    super(props);
    this.state = {
        button_text:"Connect",
    }
    this.ConPressed = this.Conpressed.bind(this);
}

Answer 2

在您的可触摸代码中，您传递的是方法执行而不是方法引用。

<TouchableHighlight
onPress={() => this.ConPressed()}>
<Text>{this.state.button_text}</Text>
</TouchableHighlight>

这意味着 conPressed 将在组件安装后立即执行，这可能就是您收到错误的原因。尝试将其更改为

<TouchableHighlight
onPress={() => this.ConPressed}>
<Text>{this.state.button_text}</Text>
</TouchableHighlight>

还有

this.ConPressed = this.ConPressed.bind(this)

在你的构造函数中

Answer 3

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

    this.state = {
      button_text: 'Connect',
    }
  }


  ConPressed = () => {
    this.setState({ button_text: 'Connected' });
  }


  render() {
    return (
      <TouchableHighlight onPress={this.ConPressed}>
        <Text>{this.state.button_text}</Text>
      </TouchableHighlight>
    );
  }
}

所以现在您想在原始文件中导入 ListItem，并在 renderRow 中使用它。

renderRow={() => <ListItem />}

如何在 React Native 中更改列表视图中按钮的文本？

how to change text of button in listview in react native?

listview

react-native

react-native-listview