9.事件

2020-05-20  本文已影响0人  __疯子__

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

实现效果,输入框可用输入,并且获取输入的值

1.给输入框设置默认值src/components/TodoInput/index.js

    //构造函数
    constructor(props) {
        super(props);
        this.state={//添加状态
            inputValue:''
        }
    }
    render() {
        return (
            <div>
                <input value={this.state.inputValue} type="text"/>  #update 修改
                <button>{this.props.btnText}</button>
            </div>
        );
    }

运行项目yarn start
问题:输入框内输入值没有反应
解释:不是没有反应,而是输入的值,没有进行保存,react特性:单向数据流,所以需要手动给this.state.inputValue设置值(使用onChange事件进行监听)
2.给输入框添加修改事件 onChange

<input value={this.state.inputValue} type="text" onChange={this.handleInputChange}/>
handleInputChange=(e)=>{
  this.setState({
    inputValue:e.currentTarget.value,
  })
}
上一篇下一篇

猜你喜欢

热点阅读