taro中子父傳值

其實網上很多方法,我這只是一個簡單的demo,廢話不多說直接上代碼

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

//子組件
class Child extends Component{
  constructor(props) {
    super(props);
    this.state = ({
        
    })
  }
  handleVal (event) {
    this.props.handleEmail(event.target.value);
  }

  render (){
      return (
          <div>
                請輸入郵箱：<input style="width:200px;height:30px;font-size:18px;" ref="emailDom" onChange={this.handleVal.bind(this)} />
          </div>
      )
  }
};

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email:"火星黑洞"
    }
  }
  handleEmail1(date){
    this.setState({
      email:date
    })
  }
  

  config = {
    navigationBarTitleText: '首頁'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <div className='index'>
        <h3>子父傳值</h3>
        <Child name="email"  handleEmail={this.handleEmail1.bind(this)}/>
        <div>用戶郵箱：{this.state.email}</div>
      </div>
    )
  }
}

然后執行:cnpm run dev:h5

頁面效果是: