javascript - 通过添加数字来获得两个值的结果

Question

我正在研究骰子，我只想要从 2 个不同的骰子得到的两个数字的总和，我得到两个随机数，我想要这 2 个数字的总和。

   onstructor(props){

   super(props);

   this.state={

    // This is our Default number value
    NumberHolder : 1

    }

    this.state={

    // This is our Default number value
    NumberHold : 1

    }


    }

    GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHolder : RandomNumber
    })
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    this.setState({
    NumberHold : RandomNumber1
    })
    }

    getDice(diceNum) {
    let diceSource = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSource = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSource = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSource = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSource = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSource = require(`./images/dice6.png`)
     } else {
    diceSource = require(`./images/dice1.png`)
    }
    return (
    <Image style={styles.dice}source={diceSource} />
     )
     }
    getDice1(diceNum) {
    let diceSourc = require(`./images/dice1.png`)
    if (diceNum === 2) {
    diceSourc = require(`./images/dice2.png`)
    } else if (diceNum === 3) {
    diceSourc = require(`./images/dice3.png`)
    } else if (diceNum === 4) {
    diceSourc = require(`./images/dice4.png`)
    } else if (diceNum === 5) {
    diceSourc = require(`./images/dice5.png`)
    } else if (diceNum === 6) {
    diceSourc = require(`./images/dice6.png`)
    } else {
    diceSourc = require(`./images/dice1.png`)
    }
    return (
   <Image style={styles.dice1}source={diceSourc} />
   )
   }
   render() {
  // this is just for the demo purposes
  const imageSize = this.state.NumberHolder * 50


   return (
   <View style={styles.MainContainer} >
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}> 
   {this.state.NumberHolder}
   </Text>
   <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}> 
   {this.state.NumberHold}

    </Text>

    <View style={{flexDirection:'row'}}>
    <View style={{fleax:1,justifyContent:"flex-start",alignSelf:"flex- 
     start",    }}>
              { this.getDice(this.state.NumberHolder) }
    </View>
    <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
    { this.getDice1(this.state.NumberHold) }
    </View>
    </View>

    <Button style={{marginTop:40}}  title="Roll again" onPress= 
    {this.GenerateRandomNumber} />
   </View>

我只想通过将这 2 个值相加得到结果。我已经生成了两个数字，在此基础上我得到了图像我只是想通过添加 2 个随机数得到一个结果

Answer 1

我重构了你所有的代码，还在 generateRandom 方法上我在状态中添加了一个名为 sum 的变量，现在假设你想在 View 中使用它，你可以通过调用 {this.state.sum}

constructor(props) {
   super(props);

   this.state={
        // This is our Default number value
        NumberHolder : 1,
        NumberHold : 1,
        sum: 0
    }
}

GenerateRandomNumber = () => {
    let RandomNumber = Math.floor(Math.random() * 6) + 1;
    let RandomNumber1 = Math.floor(Math.random() * 6) + 1 ;
    let sum = RandomNumber + RandomNumber1;

    this.setState({
        NumberHolder : RandomNumber,
        NumberHold : RandomNumber1,
        sum
    });
}

getDice(diceNum) {
    diceSource = require(`./images/dice${diceNum}.png`)
    return (
        <Image style={styles.dice} source={diceSource} />
    )
}

getDice1(diceNum) {
    diceSourc = require(`./images/dice${diceNum}.png`);

    return (
        <Image style={styles.dice1} source={diceSourc} />
   )
}

render() {
    const imageSize = this.state.NumberHolder * 50

    return (
        <View style={styles.MainContainer} >
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:10 }}>{this.state.NumberHolder}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.NumberHold}</Text>
            <Text style={{ marginBottom: 10, fontSize: 20,marginTop:20 }}>{this.state.sum}</Text>

            <View style={{flexDirection:'row'}}>
                <View style={{flex:1, justifyContent:"flex-start", alignSelf:"flex-start"}}>
                    {this.getDice(this.state.NumberHolder)}
                </View>
                <View style={{alignSelf:"flex-end",marginLeft:30,marginBottom:9}}>
                {this.getDice1(this.state.NumberHold)}
                </View>
            </View>

        <Button style={{marginTop:40}}  title="Roll again" onPress={this.GenerateRandomNumber} />
    </View>
}