taro事件处理（点击事件操作）

Checkbox

PS 凡是打印错误获取不到都可以在后面加tostring来进行打印获取

使用Checkbox

import { View, Text ,Checkbox} from '@tarojs/components'//我们要使用这个先把这个标签引入进来


<Checkbox></Checkbox>//然后在这个里面进行使用

使用Checkbox并监听状态

import Taro, { Component } from 'react'
import { View, Text, Checkbox } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  constructor(props) {//定义check刚开始为false与vue的data里面一样
    super(props)
    this.state = {
      checked: false
    }
  }
  //下面这些是生命周期
  componentWillMount() { }
  componentDidMount() { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  // 这个是多选按钮点击的事件选中状态
  handclick = () => {
    this.setState({
      checked: !this.state.checked
    })
  }
  render() {
    const { checked } = this.state//按照对象结构形式展示
    return (
      <View className='index'>
        {/*  */}
        //checked={checked}这里面的是因为在上面定义过了 
        <Checkbox checked={checked} onClick={this.handclick}></Checkbox>
        <View>
          <Text>当前状态:{checked.toString()}</Text>
        </View>
        {/*  */}
      </View>
    )
  }
}

效果图

事件处理函数在点击时给事件传递参数

事件处理函数就是点击来处理内部的函数
这边是传递为hello的参数

2种方法

• 第一种
  这个是点击时传递参数 为hello

 <Checkbox onClick={this.handclick.bind(this,'hello')}></Checkbox>

//然后点击时传递打印出来为hello
  handclick (text) {
    console.log(text)
  }

• 第二种
  这个是点击时传递参数 为hello

 <Checkbox onClick={()=>this.handclick('hello')}></Checkbox>

//然后点击时传递打印出来为hello
  handclick (text) {
    console.log(text)
  }

函数式组件

这个未完待续 初学react 可以先跳过这个。。。。。。。

如何定义与显示

//定义函数式是与export defaultXX这边同级定义写的

//这边是定义的组件 自定义名称
function Funfsa(){
  return '你好我是函数式组件'
}


//然后在显示这样写
 <Funfsa/>

如何使用

函数式的文件

定义的名字为funCo
这个函数式在components文件中的index.js里面写
函数式组件要引入useCallback 在react里面

import Taro, {useCallback } from 'react'

import Taro, {useCallback } from 'react'//首先因为我们要使用taro所有我们要导入它
import { View, Text } from '@tarojs/components'
export default function Funfsa(){
   const handleclick=useCallback(()=>{
  console.log(12121)
   })
    return( <View onClick={handleclick}>点我</View>)
  }

引入函数式的文件

import FunCo from '../components/funCo'


  <FunCo/>

表单的双向绑定

相当于vue的v-model
这个onchange事件没反应
https://blog.csdn.net/qq_33933205/article/details/109702913

onInput使用这个来写

首先要把input引进来
import { View, Text, Checkbox, Input } from '@tarojs/components'

然后在 constructor这个里面定义一个空值
export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ''//定义一个空的value
    }
  }

//其次在
 render() {
   const { value } = this.state;// 在这里把value的值拿到
 return (
      <View className='index'>
        <Input value={value} onInput={this.handchange} placeholder="这个是input框"></Input>//然后呢定义吧一个事件
        <Text>{value}</Text>//在输入的时候这边显示

      </View>
    )

}

最后这个是点击事件的写法
 handchange=(e)=>{
  console.log(e.detail.value)
  // 赋值
  const {value} = e.detail; //这个是es6写法  首先呢定义一个值
  this.setState({
    // value:e.detail.value  这个呢是es5 的写法
    value:value //这个是es6写法  然后呢放置这里面
  })
  }

效果图