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正确更新，并解决了我的问题。

但是，尽管这确实解决了我原来的问题，但我仍然不知道是否有更好的信息传递方式。