当前位置: 首页 > 工具软件 > Fusion Design > 使用案例 >

FusionDesign按钮获取值与显示方法

齐朝明
2023-12-01

import React from 'react';
import ReactDOM from 'react-dom';

import { Input } from '@alifd/next';
import '@alifd/next/dist/next.css';
  

class Btn extends React.Component{

   //定义props and state
   constructor(props){
      super(props)
      this.state  = {
         name: ''
      }
      //这里  需要绑定下  因为不绑定的话 Input组件的调用为为他自身,this此时不指向Btn组件,  所以需要绑定为Btn的组件,才能修改
      this.setBtn  = this.setBtn.bind(this)
   }

   //设置值
   setBtn(item){

      console.log(this)


      console.log(item)
      this.setState({
         name:item
      })
   }
   
   //渲染
   render(){
      
      //方式二
      // const {name} =  this.state


      return (<div>
         {/* 方式一 */}
          <Input size="large" placeholder="Large" value={this.state.name} onChange={this.setBtn} aria-label="Large" />
          
          {/* 方式二 */}
          {/* <Input size="large" placeholder="Large" value={name} onChange={this.setBtn} aria-label="Large" /> */}

      </div>)
   }
 

}

 

 ReactDOM.render(   
    <Btn />
 , document.getElementById('root') )

 

 

 类似资料: