React Native-嘗試更新金額，但從父級傳遞給子級時未正確更新

Question

我正在嘗試使用React Native創建一個小費計算器應用程序，其中用戶在文本字段上輸入總金額，小費金額將顯示給用戶，如下所示。

如您所見，數量已減少，原因可能是我輸入文字的方式：

<Text>Total Amount: </Text>
    <TextInput
    style={styles.textInputContainer}
    onChangeText={this.handleTotalAmount}
    onSubmitEditing={this.handleTotalAmount}
    />

但是，我確實找到了一種解決方法，如果我也使用onSubmitEditing ，則當我按下return時該字段將正確更新。 這對我來說並不太好，因為我感覺自己在不了解它的工作原理的情況下就將其混為一談，而且我還覺得有一個更好的解決方案可以將更新的值傳遞給另一個類。

如果有助於顯示我的應用程序結構，這是我的代碼的其他內容。 我有一個TotalAmount類， TotalAmount具有一個TextInput ，它將接受一個totalAmount ，我想將該totalAmount傳遞到我的類TipAmount15以計算小費金額。 我可以將所有內容都放在一個類中，但是因為我想增加更多的小費金額，所以我想將這些類分開。 請讓我知道是否有比onChangeText或onSubmitEditing更好的更新方式或是否有更好的TextInput屬性使用！ 非常感謝您的幫助。

class TotalAmount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      totalAmount: ''
    }
  }

  handleTotalAmount = (totalAmountInput) => {
    this.setState({
      totalAmount: totalAmountInput
    })
}


render() {

    return (
      <View>
      <View style={styles.totalAmountContainer}>
          <Text>Total Amount: </Text>
            <TextInput
            style={styles.textInputContainer}
            onChangeText={this.handleTotalAmount}
            onSubmitEditing={this.handleTotalAmount}
            />  
      </View>
      <TipAmount15 
        percent={15}
        totalAmount={this.state.totalAmount}/>
      </View>
    )
  }
}

class TipAmount15 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: '',
      totalAmount: '',
      tipAmount15:'',
      postTipAmount15:''
    }
  }
  componentWillReceiveProps(props) {
    var percent = this.props.percent;
    var totalAmountInput = this.props.totalAmount;
    this.setState({totalAmount: totalAmountInput})
//Calculate Tip Percentages
    this.setState({tipAmount15: parseFloat(totalAmountInput*(percent/100)).toFixed(2)})
    this.setState({postTipAmount15: parseFloat(totalAmountInput * (1+(percent/100))).toFixed(2)})
  }

  render() { 
    return (
      <View style={styles.tipCalculatorContainer}>     
            <Text>{this.props.percent}%</Text>
            <Text>Tip Amount: {this.state.tipAmount15}</Text>
            <Text>Total Amount: {this.state.postTipAmount15}</Text>
        </View>
    )
  }
}

Answer 1

夫妻想法：

1）您應該能夠將TipAmount重構為更簡單的內容，例如（請注意，在此示例的最后需要鍵入convert）

const TipAmount15 = ({ percent, totalAmount }) => {
  const tipAmount = parseFloat(totalAmount * (percent/100)).toFixed(2)

  return (
    <View style={styles.tipCalculatorContainer}>     
      <Text>{this.props.percent}%</Text>
      <Text>Tip Amount: {tipAmount}</Text>
      <Text>Total Amount: {Number(totalAmount) + Number(tipAmount)}</Text>
    </View>
  )
}

因為我們要做的只是幾次計算，以呈現給用戶。 我們顯示的所有內容都可以輕松地從給定的props進行轉換，因此並不需要此組件保持其自身的狀態。

2）為什么會發生TextInput的TotalAmount組件需要同時處理onChange和submit ，如果他們都只是調用相同的處理？ 在這種情況下，我認為您不需要兩者。

Answer 2

問題是我不正確地使用componentWillReceiveProps 。

 componentWillReceiveProps(newProps) {
    if(newProps.totalAmount != this.props.totalAmount){
      var percent = this.props.percent;
      var totalAmountInput = newProps.totalAmount;
      this.setState({totalAmount: totalAmountInput});
      this.setState({tipAmount15: parseFloat(totalAmountInput*(percent/100)).toFixed(2)})
      this.setState({postTipAmount15: parseFloat(totalAmountInput * (1+(percent/100))).toFixed(2)})
    }
  }

現在，當檢查是否有更改時，它會使用文本字段onChangeText正確更新，並解決了我的問題。

但是，盡管這確實解決了我原來的問題，但我仍然不知道是否有更好的信息傳遞方式。