javascript - 类组件中的 BMR 计算器反应原生

Question

    import React, { Component, useState } from "react";
    
    export class Register extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          In: "",
          lbs: "",
          age: "",
          gender: "",
    
        };
      }
    
    render() {
    
        //BMR Calculator
        const { In } = this.state;
        const { lbs } = this.state;
        const { age } = this.state;
        const { gender } = this.state;
    
    return (
          <SafeAreaView>
                <View>
                  <TextInput
                    label="username"
                    onChangeText={(name) => this.setState({ name })}
                  />
    
                  <TextInput
                    label="email"
                    onChangeText={(email) => this.setState({ email })}
                  />
    
                  <TextInput                    
                    label="password"
                    onChangeText={(password) => this.setState({ password })}
                  />
                </View>
  
                    <Text>Weight</Text>

                      <TextInput
                        placeholder="In"
                        keyboardType="numeric"
                        maxLength="2"
                        onChangeText={(In) => this.setState({ In })}
                        style={styles.heightImperialIn}
                      />

                   <Text>Weight</Text>

                     <TextInput
                      placeholder="lbs"
                      keyboardType="numeric"
                      maxLength="3"
                      value={lbs}
                      onChangeText={(lbs) => this.setState(+e.target.value)}
                      //onChangeText={(lbs) => this.setState({ lbs })}
                      style={styles.weigthImperial}
                     />

                   <Text style={styles.txtAge}>Age</Text>

                    <TextInput
                      placeholder="18"
                      keyboardType="numeric"
                      maxLength="2"
                      value={age}
                      onChange={(age) => this.setState(+e.target.value)}
                      //onChangeText={(age) => this.setState({ age })}
                      style={styles.ageImperial}
                    />

                   <Text>Gender</Text>

                    <View style={{ top: hp("10%") }}>
                      <RNPickerSelect
                        style={pickerStyle}
                        placeholder={{
                          label: "Select a gender",
                          value: null,
                        }}
                        onValueChange={(gender) => this.setState({ gender })}
                        items={[
                          { label: "Male", value: "male" },
                          { label: "Female", value: "female" },
                        ]}
                      />
                    </View>
             </SafeAreaView>

嘿，大家，所以我有这两个用于 BMR 计算器的方程：

1. 男性=66+(6.2磅)+(12.7 英寸)-(6.76*年龄)
2. 女性=655.1+（4.35磅）+（4.7英寸）-（4.7* 年龄）

我的问题是如何根据用户选择的性别从上面的文本输入中获取 和 的值并将它们插入两个方程之一，并显示lbs结果In？age

谢谢

标签： javascriptreact-native

Answer 1

这是工作示例：Expo Snack

import React, { Component, useState } from 'react';
import { Text, View, StyleSheet, SafeAreaView, TextInput } from 'react-native';
import Constants from 'expo-constants';
import RNPickerSelect from 'react-native-picker-select';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      In: 0,
      lbs: 0,
      age: 0,
      gender: '',
    };
  }

  render() {
    //BMR Calculator
    const { In, lbs, age, gender } = this.state;

    return (
      <SafeAreaView>
        <View>
          <TextInput
            label="username"
            onChangeText={(name) => this.setState({ name })}
          />

          <TextInput
            label="email"
            onChangeText={(email) => this.setState({ email })}
          />

          <TextInput
            label="password"
            onChangeText={(password) => this.setState({ password })}
          />
        </View>

        <Text>Weight</Text>

        <TextInput
          placeholder="In"
          keyboardType="numeric"
          maxLength="2"
          onChangeText={(In) => this.setState({ In: Number(In) })}
          style={styles.heightImperialIn}
        />

        <Text>Weight</Text>

        <TextInput
          placeholder="lbs"
          keyboardType="numeric"
          maxLength="3"
          value={lbs}
          onChangeText={(lbs) => {
            console.log(typeof Number(lbs));
            this.setState({ lbs: Number(lbs) });
          }}
        />

        <Text style={styles.txtAge}>Age</Text>

        <TextInput
          placeholder="18"
          keyboardType="numeric"
          maxLength="2"
          onChangeText={(age) => this.setState({ age: Number(age) })}
          style={styles.heightImperialIn}
        />

        <Text>Gender</Text>

        <View style={{}}>
          <RNPickerSelect
            style={{}}
            placeholder={{
              label: 'Select a gender',
              value: null,
            }}
            onValueChange={(gender) => this.setState({ gender })}
            items={[
              { label: 'Male', value: 'male' },
              { label: 'Female', value: 'female' },
            ]}
          />
        </View>

        <Text>Result for {gender.toUpperCase()}</Text>
        {gender ? (
          gender === 'male' ? (
            66 + 6.2 * lbs + 12.7 * In + 6.76 * age
          ).toFixed(2) : (
            65.51 + 4.35 * lbs + 4.7 * In - 4.7 * age
          ).toFixed(2)
        ) : (
          <Text>Select the values</Text>
        )}
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
});