Question

该应用程序很简单..气体转换..我试图做的是将Inputed Amount乘以2，就好像它是公式一样。因此，我有一个index.js，即Parent，还有一个Calculate.component.js，他们进行了所有计算。我想要的是，index.js将inputed value传递给component并进行计算，然后再次将其传递给index.js以显示计算出的金额。

Index.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import styled from 'styled-components';
import PickerComponent from './Picker.Component';
import CalculateAVGAS from './Calculate.component';

export default class PickerAVGAS extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.getParam('headerTitle'),
    headerStyle: {
      borderBottomColor: 'white',
    },
  });

  state = {
    gasTypeFrom: 'Gas Type',
    gasTypeTo: 'Gas Type',
    input_amount: '',
    pickerFrom: false,
    pickerTo: false,
    isResult: false,
    result: '',
  };

  inputAmount = amount => {
    this.setState({ input_amount: amount });
    console.log(amount);
  };

  onResult = value => {
    this.setState({
      result: value,
    });
    console.log('callback ', value);
  };

  render() {
    return (
      <Container>
        <Input
          placeholder="Amount"
          multiline
          keyboardType="numeric"
          onChangeText={amount => this.inputAmount(amount)}
        />
        <ResultContainer>
          <ResultText>{this.state.result}</ResultText>
        </ResultContainer>
        <CalculateContainer>
          <CalculateAVGAS
            title="Convert"
            amount={this.state.input_amount}
            total="total"
            titleFrom={this.state.gasTypeFrom}
            titleTo={this.state.gasTypeTo}
            // isResult={this.toggleResult}
            result={value => this.onResult(value)}
          />
        </CalculateContainer>
      </Container>
    );
  }
}

CalculateAVGAS /组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

export default class CalculateAVGAS extends Component {
  static propTypes = {
    amount: PropTypes.string.isRequired,
    titleFrom: PropTypes.string.isRequired,
    titleTo: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  };

  state = {
    totalVisible: true,
    result: '',
  };

  onPressConversion = () => {
    const formula = this.props.amount * 2;
    const i = this.props.result(this.state.result);
    this.setState({ result: formula });
    // console.log(this.state.result);
    console.log('func()');
  }

  render() {
    return (
      <ButtonContainer onPress={() => this.onPressConversion()}>
        <ButtonText>{this.props.title}</ButtonText>
      </ButtonContainer>
    );
  }
}

这样做之后，setState仅在按下Convert button 两次

时更新。

Answer 1

您的问题是，您希望在父组件中显示信息，但是您正在将该信息保存在子组件的状态中。只需将金额和结果传递给无状态子组件（CalculateAVGAS）。

通常最好使子组件保持“哑巴”（即表示形式），并仅将它们需要显示的信息以及需要执行的所有功能作为道具传递。

import React, {Component} from 'react';
import styled from 'styled-components';

export default class CalculateAVGAS extends Component {
  onPressConversion = () => {
    this.props.result(this.props.amount * 2);
  };

  render() {
    return (
      <ButtonContainer onPress={() => this.onPressConversion()}>
        <ButtonText>{this.props.title}</ButtonText>
      </ButtonContainer>
    );
  }
}

const ButtonContainer = styled.TouchableOpacity``;

const ButtonText = styled.Text``;

父组件看起来像：

import React, {Component} from 'react';
import {Text} from 'react-native';
import styled from 'styled-components';
import CalculateAVGAS from './Stack';

export default class PickerAVGAS extends Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.getParam('headerTitle'),
    headerStyle: {
      borderBottomColor: 'white',
    },
  });

  state = {
    gasTypeFrom: 'Gas Type',
    gasTypeTo: 'Gas Type',
    input_amount: null,
    pickerFrom: false,
    pickerTo: false,
    isResult: false,
    result: null,
  };

  inputAmount = amount => {
    this.setState({input_amount: amount});
  };

  onResult = value => {
    this.setState({
      result: value,
    });
  };

  render() {
    return (
      <Container>
        <Input
          placeholder="Amount"
          multiline
          keyboardType="numeric"
          onChangeText={amount => this.inputAmount(amount)}
        />
        <ResultContainer>
          <ResultText>{this.state.result}</ResultText>
        </ResultContainer>
        <CalculateContainer>
          <CalculateAVGAS
            title="Convert"
            amount={this.state.input_amount}
            total="total"
            titleFrom={this.state.gasTypeFrom}
            titleTo={this.state.gasTypeTo}
            result={value => this.onResult(value)}
          />
        </CalculateContainer>
      </Container>
    );
  }
}

const Container = styled.View``;

const ResultContainer = styled.View``;

const ResultText = styled.Text``;

const CalculateContainer = styled.View``;

const Input = styled.TextInput``;

React-Native：两次按下按钮只会更新this.setState

1 个答案: