React响应式设计思想和事件绑定

任务:完成input框的动态输入

1.构造函数

完成组件初始化

2.js事件绑定

2.1第二个单词首字母大写

onChange={this.handleInputChange.bind(this)}

2.2获取inputValue的值

value={this.state.inputValue}

2.3设置state

this.setState({ inputValue: e.target.value })

2.4完整代码

import React, { Component,Fragment} from 'react';
import logo from './logo.svg';
import './App.css';

class TodoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
            <button>提交</button>
        </div>
        <ul>
          <li>学英语</li><li>Learning React</li>
        </ul>
      </Fragment>
    );
      }
    handleInputChange(e){
        this.setState({
            inputValue: e.target.value
        })
    }
}

export default TodoList;