react 按钮

代码

[removed][removed][removed][removed][removed][removed]
[removed]//在这里写react代码const element="Hello React";//function Square(props){
  return(
  
     {props.value}
    
    );}ReactDOM.render(,document.getElementById("example"));[removed]

显示一个按钮，按钮上面的文本，可以通过value来设置

调用了组件Square

value，是组件的一个属性

function Square(props)

function函数声明关键字，

Square函数名，或者组件名

props组件的属性

每一个组件，都有属性

props.value

组件的value属性

给个标识判断一下，是哪个就执行哪个事件

给个标识判断一下，是哪个就执行哪个事件

给个标识判断一下，是哪个就执行哪个事件

一、简单的方法

1.效果图

2.代码

import React, { Component } from 'react';

import './App.css';

import on from './on.png';

import off from './off.png';

class App extends Component {

constructor(props) {

super(props);

this.state = {

touchState: false

}

}

touchStart() {

this.setState({ touchState: !this.state.touchState });

}

render() {

return (

);

}

}

export default App;

3.注意：其中on.png，off.png需要放到对应目录下，这两张图片需要提前下载，下图是我的文件目录

4.注意：很多时候，由于页面内可能不止一个按钮，为了使每个按钮互相不影响，应该将上面的单独写一个js文件，封装起来，在需要按钮的地方再引入进去，这样按钮之间点击不会受影响

二、通过从父组件设置值，传入子组件（推荐使用）实现父子组件之间的传值

1.子组件ToggleButton.js

此处的... props.data，要根据你父组件设置的值打印出来看结构才能确定。

import React, { Component } from "react";

import on from './on.png';

import off from './off.png';

class ToggleButton extends Component {

  constructor(props) {

    super(props);

    this.state = {

      ... props.data

    };

  }

  touchStart() {

    this.setState({ bottom:!this.state.bottom });

  }

  render =()=> {

    console.log('this.state.text',this.state.text)

    return (