Question

我有一个我想在用户点击按钮时呈现的组件列表。该屏幕应该是用户在其查询中键入的搜索屏幕，并且当他们点击搜索按钮时，显示结果列表。但是，当我尝试使用onPress进行组件渲染时，没有任何反应。对于此示例，我只是打印文本而不是使用map来打印组件。

renderResults() {  
   return <Text> Doesn't get printed </Text>
  }

  render() {
    return (
      <View>
        <Button
          onPress={ this.renderResults.bind(this) } //use .bind(this) to access state in renderResults
          title="Search!"
          color="#841584" />
       </View>
      );
  }

Answer 1

React并不知道它需要使用此方法重新渲染视图。相反，通过更新本地状态强制重新渲染。我会在构造函数中执行类似state = {buttonPressed: false}的操作，然后在this.setState({ buttonPressed: true}中执行onPress。然后在渲染中只有一个简单的布尔值，以返回文本或按钮，具体取决于状态中的buttonPressed是真还是假

Answer 2

export default class App extends Component {
    state={
      isVisible:false
    }

    renderResults=() =>{ 
      this.setState({
        isVisible:!this.state.isVisible//toggles the visibilty of the text
      })
    } 

    render() { 
      return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          {this.state.isVisible?<Text> get printed </Text>:null}
          <Button onPress={ this.renderResults} 
            title="Search!" 
            color="#841584" /> 
      </View> 
      );
     }
}

试试这段代码。

您可以在link

上运行演示

Answer 3

简单例如。由@Max Millington回答。您可以使用Conditional rendering检查状态是真还是假。

constructor () {
   super();
   this.state = {printText:false};
} 

showText = () => {
   this.setState({printText:true});
}

render() {
  return (
   <View>
    <Button
      onPress={() => this.showText() } 
      title="Search!"
      color="#841584" />
     {this.state.printText && <Text> Printed text... </Text> }
   </View>
  );
}

React Native：按钮上的渲染组件单击

3 个答案: