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