react-子传父案例（汇率转换）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>钱币换算</title><!-- 引入 React 核心库 --><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><!-- 提供与 DOM 相关的功能 --><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><!-- Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。 --><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head><!-- 子传父逻辑：父组件传递一个函数给子组件子组件接受父组件传递过来的函数，调用的时候传递子组件state中的值，这样父组件就能得到子组件的数据
--><body><div id="app"></div><script type="text/babel">// 子组件class Input extends React.Component {// 通过 props 接收父组件传递过来的东西constructor(props) {super(props);}handleChange = (e) => {// 将子组件的值通过父组件传递过来的方法进行改变this.props.dollarChange(e.target.value);}render() {// 特别备注：汇率转换以后，父组件把数据传递给子组件，子组件进行渲染const money = this.props.money;const text = this.props.type == 'd' ? '美元' : '人民币';//   <legend>{text}</legend>  这个用于渲染页面的美元和人名币文字return (<fieldset style={{ width: '500px' }}><legend>{text}</legend><input value={money} onChange={this.handleChange} /></fieldset>);}}// 父组件// 维护的数据是在父组件上面维护// 数据的转换，也是在父组件上面操作class App extends React.Component {constructor(props) {super(props);// 父组件维护的数据this.state = {dollar: '', // 美元的值yuan: '', // 人民币的值};}// 父组件上面还有两个方法：主要负责美元换人民币 人民币换美元// 美元换人民币dollarInput = (value) => {if (parseFloat(value) || value == '' || parseFloat(value) == 0) {this.setState({dollar: value,yuan: value == '' ? '' : value * 6.7951});} else {alert('输入值必须为数字。');}}// 人民币换美元yuanInput = (value) => {if (parseFloat(value) || value == '' || parseFloat(value) == 0) {this.setState({dollar: value == '' ? '' : value * 0.1472,yuan: value,});} else {alert('输入值必须为数字。');}}// 父组件向子组件传递数据时，上面的子组件传递了 dollarInput 方法，下面的子组件传递了 yuanInput 方法// 子组件在数据发生更改时，会使用从父组件拿到的方法进行换算，然后将最新的数据传递给父组件// 在使用子组件的时候，需要传递的参数：父组件上面的数据、父组件上面的方法 type 类型render() {return (<div><Input type={'d'} dollarChange={this.dollarInput} money={this.state.dollar} /><Input type={'y'} dollarChange={this.yuanInput} money={this.state.yuan} /></div>);}}ReactDOM.render(<App />, document.getElementById('app'));</script>
</body></html>

页面效果（汇率固定写死）

react-子传父案例（汇率转换）相关推荐

react 通信-子传父
父组件中定义一个回调函数,由子组件来调用执行.用this.props.[父组件自定义回调函数名称]()调用 /** @Author: Spring* @LastEditors: Aidam_Bo* @ ...
React (三) 修改props，React父传子、子传父、this绑定
Props介绍与应用什么是 props 如何使用父传子函数组件类组件默认值子传父修改 props 事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐) 箭头函数(推荐) 直 ...
react（子传父、父传子）
目录 1. 父传子数组/对象的两种写法 2. 子传父: 3. 生成唯一id的库: 4. 对接收的组件进行验证 1. 父传子数组/对象的两种写法 function App() {const ob ...
React父传子、子传父
父子传值父传子将子组件导入父组件并使用,在注册的子组件标签上通过自定义属性接收要传递的变量或者方法,在父组件的constructor(props)可以通过props属性接收父组件传递过来的方法 / ...
react 三种通信方式（父传子、子传父、兄弟传值）
react有三种通信方式:一.父传子,二.字传父,三.兄弟之间传值一.父组件向子组件传值父组件通过属性的方式传递参数,子组件通过props来接收父组件传递过来的参数 React中是单向数据流,数据 ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
uniapp组件传值的方法(父传子，子传父，对象传值)案例
文章目录前言父组件给子组件传值子组件给父组件传值父组件给父组件传对象值前言最近看到uniapp组件传值的方法,这里记录一下,学过vue的应该都觉得很简单,传值的方法基本与vue的写法差不多 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue组件之间的通讯方式——父传子、子传父、兄弟组件间的通讯
目录一.父传子 1.props 属性传递 2.方法传递 3. $parent获取方法和属性二.子传父 1. 属性传递 2 .通过$refs主动获取子组件方法和属性 3 .通过$children主动 ...

react-子传父案例（汇率转换）

react-子传父案例（汇率转换）相关推荐

最新文章

热门文章