FusionDesign按钮获取值与显示方法

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') )