React汇率小案例

本文主要是介绍React汇率小案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

import React from "react";
import Money from "./components/Money";
class App extends React.Component {
  // state
  state = {
    dollar: '',
    money: ''
  }
  transformRmb = (value) => {
    this.setState({
      // 保留后两位 并判断value值
      dollar: value === '' ? '' : (value * 7.2456).toFixed(2),
      money: value
    })
  }
  transformMy = (value) => {
    this.setState({
      dollar: value,
      // 保留后两位 并判断value值
      money: value === '' ? '' : (value * 0.138).toFixed(2)
    })
  }
  render() {
    return (
      <div className="App">

 

 

export default function Money(props) {
  function changeHandler(e){
    // 7.2456
    props.transform(e.target.value)
  }
  return (
    <div>
      {/* props有点像vue中的props */}
      <label>{props.content}</label>
      <input onChange={changeHandler} value={props.money} />
    </div>
  );
}

        <Money content='人民币:' money={this.state.money} transform={this.transformRmb} />
        <Money content='美元:' money={this.state.dollar} transform={this.transformMy} />
      </div>
    )
  }
}
export default App;

 

这篇关于React汇率小案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---