Reactjs 单击按钮后，如何将按钮中的文本输入警报？（以及如何禁用和保持按钮处于选中状态）

我正在尝试编写一个情绪应用程序，在其中你可以在快乐、悲伤等按钮之间进行选择。单击一个按钮后，我希望按钮文本显示上的信息进入一个函数saveData，然后我可以将其显示为警报。例如，如果我单击“快乐”，然后单击未显示的提交按钮，则警报将显示心情：快乐。我该怎么做？我还想问一下禁用按钮的问题。例如，选择“快乐”按钮后，我想禁用“悲伤”和“愤怒”，并将“快乐”保留为选中状态

export default class App extends Component{
  constructor(props){
    super(props)
    this.state={
      mood: '',
    }
  }

  saveData = () => {
    const {mood} = this.state;
    alert("mood:", mood);
  };

  render() {
    return(
          <View style={styles.container}>
            <Text style={styles.mood}>Mood</Text>
            <View style={styles.container2}>
            <TouchableOpacity
              style={styles.button}
              onPress={mood => this.setState({mood})}
            >
             <Text style={styles.answer}>happy</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={mood=>this.setState({mood})}
            >
             <Text style={styles.answer}>sad</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={mood=>this.setState({mood})}
            >
             <Text style={styles.answer}>angry</Text>
            </TouchableOpacity>
            </View>
          </View>
      );
    }
  }

---

您好，您需要将正确的情绪传递给函数，但TouchableOpacity不知道选择了什么情绪，因此请按如下方式尝试：

export default class App extends Component{
  constructor(props){
    super(props)
    this.state={
      mood: '',
    }
  }

  saveData = () => {
    const {mood} = this.state;
    alert("mood:", mood);
  };

  render() {
    const currentMood = this.state.mood;
    return(
          <View style={styles.container}>
            <Text style={styles.mood}>Mood</Text>
            <View style={styles.container2}>
            <TouchableOpacity
              disabled={currentMood.length !== 0 && currentMood !== 'happy'}
              style={styles.button}
              onPress={() => this.setState({mood: "happy"})}
            >
             <Text style={styles.answer}>happy</Text>
            </TouchableOpacity>
            <TouchableOpacity
              disabled={currentMood.length !== 0 && currentMood !== 'sad'}
              style={styles.button}
              onPress={() => this.setState({mood: "sad"})}
            >
             <Text style={styles.answer}>sad</Text>
            </TouchableOpacity>
            <TouchableOpacity
              disabled={currentMood.length !== 0 && currentMood !== 'angry'}
              style={styles.button}
              onPress={() => this.setState({mood: "angry"})}
            >
             <Text style={styles.answer}>angry</Text>
            </TouchableOpacity>
            </View>
          </View>
      );
    }
  }

正如您所看到的，您可以像这样将disable传递给touchablepacity。 如果选择了一种情绪，但它与当前情绪不同，这将禁用按钮

您还可以通过使其更通用来改进：

function App = () => {
    const [currentMood, setMood] = React.useState('');
    const moods = ['happy', 'angry', 'sad'];
    return <View style={styles.container}>
        <Text style={styles.mood}>Mood</Text>
        <View style={styles.container2}>
        {
           moods.map(mood => <TouchableOpacity
               disabled={currentMood.length !== 0 && currentMood !== mood}
               style={styles.button}
               onPress={() => setMood(mood)}>
               <Text style={styles.answer}>{mood}</Text>
           </TouchableOpacity>
        }
      </View>
        <TouchableOpacity
               disabled={currentMood.length !== 0}
               style={styles.button}
               onPress={() => alert("mood:", currentMood)}>
               <Text>Submit</Text>
           </TouchableOpacity>
   </View>
}

---

我不确定这是用于react应用程序还是react本机应用程序，但我已经准备了一个代码沙盒，它基于您在上面共享的代码

我使用了setState回调函数，以在警报浏览器调用中显示最新的状态值

并使用“渲染”中的当前状态值有条件地修改所选情绪/按钮的单击以及显示/样式行为

---

是代码沙盒链接。向上投票/让我知道这是否解决了您的问题

这是一个react应用程序还是react本机应用程序，当我看到和组件时，我感到困惑！！嘿，谢谢你提供了非常详细的解决方案！当我单击“选择”时，警报会给我一个mood:with nothing，这意味着mood变量必须为空。我怎样才能解决这个问题？看看这个沙箱，我想这应该能解决你的问题。如果不是，请告诉我。@smilada您将saveData称为哪里？您的代码中没有列出它。@AshishSingh我会看的，谢谢@Domino987这是另一个TouchableOpacity，其中onPress={this.saveData}我在将您的解决方案插入代码时添加了。它不起作用