如何在本机反应中更改列表视图中按钮的文本？

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

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

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

将ConPressed() 绑定到范围。

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