如何在 React Native 按钮组件中更改标题属性答案

【问题标题】：How to Change Title Attribute in React Native Button Component如何在 React Native 按钮组件中更改标题属性
【发布时间】：2021-05-26 15:11:20
【问题描述】：

我有一些 React 组件在应用程序中看起来像这样：

 <View style={{margin: 5}}>
        <Button title='Enable Headlights' color='#00759A' onClick={doChanges}/>
 </View>

我希望 Button 组件在单击时更改其颜色和文本。我打算让函数 doChanges 执行此操作，但我无法找到修改标题和颜色属性的方法。我见过定制的组件，它们通过在组件中调用 setState 来进行这些类型的状态更改，但 Button 不是我制作的组件。我尝试按照以下方式做一些事情：

 var text = "Enable headlights"
 function doChanges(text) {
       text = "Disable headlights"
 }
  
 <View style={{margin: 5}}>
        <Button title={text} color='#00759A' onClick={()=> {doChanges(text)}}/>
 </View>

但这似乎不像我想要的那样工作。我认为这是因为即使变量 text 发生了变化，但实际组件并没有重新渲染，所以 text 的变化从未真正出现过。

似乎没有办法强制组件重新渲染，我也看不出有什么办法可以修改 Button 组件的标题和颜色属性。

我是否必须制作一个从 Button 继承的自定义组件才能获得我想要的功能？或者有没有一种特定的方式可以让我在 React 中做这样的事情？

任何帮助将不胜感激！

【问题讨论】：

你可以使用useState钩子来更新一些道具并用新的重新渲染组件

标签： reactjs react-native button

【解决方案1】：

如果您应该在 UI 级别进行更改，那么您应该使用状态来呈现更新后的视图。

喜欢：

如果您使用类组件：

class Demo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            buttonText: "Enable headlights"
        }
        this.doChanges = this.doChanges.bind(this);
    }

     function doChanges(text) {
         this.setState({ buttonText: "Disable headlights" });
     }

     render() {
         return (
              <View style={{margin: 5}}>
                  <Button title={this.state.} color='#00759A' onClick={()=> {doChanges(text)}}/>
              </View>
         )
     }
}

如果您使用功能组件：

const Demo = props => {
    
     const [buttonText, setButtonText] = useState("Enable headlights")

     function doChanges(text) {
         setButtonText("Disable headlights");
     }

     return (
          <View style={{margin: 5}}>
              <Button title={text} color='#00759A' onClick={()=> {doChanges(text)}}/>
          </View>
     )
}

【讨论】：