5. jsx初探

jsx使用注意事项

事件名称第二个字母需要大写，比如onChange/onClick。
若要在jsx中编写js，需要将js用 { } 进行包裹。

修改state中的值

我们可以使用setState来修改state中的值，其中传入参数是以一个对象的方式传入。

import React, { Component, Fragment } from 'react';

class TodoList extends Component {

  // 构造函数
  constructor(props){  
    super(props);
    
      // state 负责存储数据
    this.state = {  
      inputValue: 'hello',
      list:[]
    }
  }

  render () {
    return (
        <Fragment> 
          <input 
            // value 为上面inputValud中定义的值
            
            value={ this.state.inputValue }  
            
            // onChangeHandler 为js中的一个函数，且改变onChangeHandler的this指向
            onChange={ this.onChangeHandler.bind(this) }  
          /> 
          <button>提交</button>
        	<ul>
          		<li> 111 </li>
        	</ul>
        </Fragment>
      )
  }

  onChangeHandler(e){
    // 通过e.target.value 获取input输入框中的值
    console.log(e.target.value)  
     
    // 如果要修改state的数据，需要使用setState方法
    this.setState({              
      inputValue: e.target.value 
    })
  }

}

export default TodoList;

代码地址