React汇率小案例

来吧，本章为大家带来一个比较简单的小案例

可以帮助大家了解表单在react中的基本操作，好废话不多说，go

App.js

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

Money.js

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>
  );
}

好了，感谢阅读，这是一个简单的小案例，希望可以帮到基础薄弱的同学

学海无涯，加油！