非受控组件
在input中添加ref
export default class AddTodoItem extends Component{
addTask = (event) => {
event.preventDefault();
let element = ReactDOM.findDOMNode(this.refs.newitem)
let task = element.value
if(task === ''){
notification.open({
description : 'todo内容不能为空'
})
} else {
this.props.addTask(task)
element.value = ""
}
}
render(){
return (
<div className="addtodolist">
<div className="input"><Input id='newitem' type = 'text' ref='newitem' placeholder='吃饭睡觉打豆豆'/></div>
<div className="button"><Button type='primary' onClick={this.addTask}>添加</Button></div>
</div>
)
}
受控组件
export default class AddTodoItem extends Component{
constructor(props){
super(props)
this.state = {
inputValue : ''
}
}
// 监听input输入框中值的变化,并更新状态
handleChange = (event) => {
this.setState({
inputValue : event.target.value
})
}
render(){
return (
<div className="addtodolist">
<div className="input"><Input id='newitem' type = 'text' onChange={this.handleChange} placeholder='吃饭睡觉打豆豆'/></div>
</div>
)
}
}