在组件内部调用函数

Question

我正在开发一个 simon-says 游戏作为我的第一个 React Native 应用程序。

我们的想法是根据我们所在的回合向玩家显示序列，然后让玩家按下一个按钮，检查该按钮是否与给定的序列匹配，如果匹配则让用户再次按下，调用再次检查功能。如果他在回合结束时表现不错，那么我会增加回合等，然后再次显示序列。如果玩家失败，游戏将停止，直到用户再次按下开始。

我不知道如何设置一个循环，使玩家能够按下按钮直到回合结束，因为这个函数只在按下时调用，所以我不知道如何控制它。

我们的想法是根据我们所在的回合向玩家显示序列，然后让玩家按下一个按钮，检查该按钮是否与给定的序列匹配，然后让用户再次按下，调用函数再检查一遍。如果他没问题，那么我增加回合等，然后再次显示序列。

所有这些应该从第 1 轮循环到 seq.length。

有什么想法吗？我的代码如下。谢谢！

import React, {Component} from 'react';
import {StyleSheet, Text, View,TouchableOpacity, Button, Image} from 'react-native';
export default class App extends Component{ 
  constructor (props){
    super(props);
    this.flash=0
    this.round=1
    this.seq=[] 
    this.playerSeq=[] 
    this.win=false
    this.ok=true
    this.score=0
    this.state = {
      canPress: false,
      greenB: {
        backgroundColor: 'darkgreen'
      },
      yellowB: {
        backgroundColor: 'orange'
      },
      blueB: {
        backgroundColor: 'blue'
      },
      redB: {
        backgroundColor: 'red'
      }
    }
    this.play=this.play.bind(this)
    this.greenFlash=this.greenFlash.bind(this)
    this.blueFlash=this.blueFlash.bind(this)
    this.redFlash=this.redFlash.bind(this)
    this.playerTurn=this.playerTurn.bind(this)
    this.check=this.check.bind(this)
  }

  play(){
    this.seq=[1,2,3,1,4] //will be random, this is just for testing
    this.playerSeq=[] 
    this.flash=0
    this.round=1
    this.win=false
    this.ok=true
    this.score=0
    this.compTurn()
    this.setState({canPress: true})
  } 

  playerTurn(i){
    this.flash=0
    this.playerSeq[this.flash]=i
    this.setState({canPress: false})
    this.check()
  }

  check(){ 
    if (this.playerSeq[this.flash]==this.seq[this.flash]){
      if (this.playerSeq[this.flash]==1){
        this.greenFlash();
      }
      if (this.playerSeq[this.flash]==2){
        this.yellowFlash();
      }
      if (this.playerSeq[this.flash]==3){
        this.blueFlash();
      }
      if (this.playerSeq[this.flash]==4){
        this.redFlash();
      }
      this.flash++
      this.ok=true
      this.setState({canPress: true})
      if (this.flash==this.round){
        this.setState({canPress: false})
        this.round++
        }
      }
      else {
        this.ok=false;
      }
    }

    compTurn() {
      let intervalId = setInterval(()=> {
        if (this.flash==this.round) {
          clearInterval(intervalId);
        }
        else {
          if (this.seq[this.flash]==1){
            this.greenFlash();
          }
          if (this.seq[this.flash]==2){
            this.yellowFlash();
          }
          if (this.seq[this.flash]==3){
            this.blueFlash();
          }
          if (this.seq[this.flash]==4){
            this.redFlash();
          }
          this.flash++;
        }
      }
      , 1500);    
      this.setState({canPress: true})
      this.flash=0;
    }

  compTurn() {
      let intervalId = setInterval(()=> {
        if (this.flash==this.round) {
          clearInterval(intervalId);
        }
        else {
          if (this.seq[this.flash]==1){
            this.greenFlash();
          }
          if (this.seq[this.flash]==2){
            this.yellowFlash();
          }
          if (this.seq[this.flash]==3){
            this.blueFlash();
          }
          if (this.seq[this.flash]==4){
            this.redFlash();
          }
          this.flash++;
        }
      }
      , 1500);  

      this.setState({canPress: true})
      //this.userTurn=true;
      this.flash=0;
  }

  greenFlash(){
      setTimeout(() => {
        this.setState( {
            greenB:{
              ...this.state.style1, backgroundColor: 'lightgreen'
            }
            })
        }, 200);
      setTimeout(() => {
        this.setState( {
            greenB:{
              ...this.state.style1, backgroundColor: 'darkgreen'
            }
            })
        }, 1000);
  } 

  yellowFlash(){
    setTimeout(() => {
      this.setState( {
          yellowB:{
            ...this.state.style1, backgroundColor: 'yellow'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          yellowB:{
            ...this.state.style1, backgroundColor: 'orange'
          }
          })
        }, 1000);
  }

  blueFlash(){
    setTimeout(() => {
      this.setState( {
          blueB:{
            ...this.state.style1, backgroundColor: 'lightblue'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          blueB:{
            ...this.state.style1, backgroundColor: 'blue'
          }
          })
        }, 1000);
  }

  redFlash(){
    setTimeout(() => {
      this.setState( {
          redB:{
            ...this.state.style1, backgroundColor: 'pink'
          }
          })
      }, 200);
    setTimeout(() => {
      this.setState( {
          redB:{
            ...this.state.style1, backgroundColor: 'red'
          }
          })
        }, 1000);
  }

  render(){
    return (
      <View>
        <TouchableOpacity style={styles.playB}
        onPress={this.play}> 
        <Text style={{
          color:'white',
          height: 30,
          width:60,
          }}>START</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[
          styles.greenB,
          this.state.greenB]} 
          onPress={this.state.canPress ? (()=> this.playerTurn(1)) : null}></TouchableOpacity>
        <TouchableOpacity style={[
          styles.yellowB,
          this.state.yellowB]} 
          onPress={this.state.canPress ? (()=> this.playerTurn(2)) : null}></TouchableOpacity>
        <TouchableOpacity style={[
          styles.blueB,
          this.state.blueB]} 
          onPress={this.state.canPress ? (()=> this.playerTurn(3)) : null}></TouchableOpacity>
        <TouchableOpacity style={[
          styles.redB,
          this.state.redB]} 
          onPress={this.state.canPress ? (()=> this.playerTurn(4)) : null}></TouchableOpacity>

          <Image
            source={{
              uri: 'https://images-eu.ssl-images-amazon.com/images/I/71pyavpLdIL.png'}}
            style={styles.icon}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  greenB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
    position: 'absolute',
    top:380,
    left: 110
  },
  yellowB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,   
    position: 'absolute',
    left: 110,
    top: 480

  },
  blueB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,   
    position: 'absolute',
    top: 380,
    left: 210

  },
  redB:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160, 
    position: 'absolute',
    left: 210,
    top: 480

  },
  playB:{
    padding: 10,
    marginLeft: 155,
    marginTop: 300,
    width: 100,
    backgroundColor: 'grey',
    height: 40,
    borderRadius: 40,
  },
  icon: {
    width: 200,
    height: 200,
    position: 'absolute',
    top: 50,
    left: 100, 
  }
});

Answer 1

而不是使用canPress状态，应该设置一个count状态，每次点击按钮，count加1，用count比较用 seq.length，然后将结果传递给 disabled 属性，像这样 <button disabled={count === seq.length}>。

您可以在 Codesandbox 上查看演示。

也许这个可以给你一些关于循环函数作为子组件的想法。 https://reactjs.org/docs/jsx-in-depth.html

以下代码来自 React 文档

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

你可以把你 TouchableOpacity 包装到像上面 Repeat 这样的组件中，然后每次玩家开始一个新的回合，然后将更新的回合值作为道具传递给 TouchableOpacity。

在组件内部调用函数

calling a function inside a component

components

reactjs

react-native

react-native-android

以下代码来自 React 文档