React的学习（2）

上节学了父组件向子组件中传值用props，这次练习感觉最关键的还是在react中子组件向父组件传值，用子组件调用父组件函数的形式来实现。

点击按钮实现添加数据

值得注意的接个点：
1.unshift接收的是数组长度，改变了原数组，直接用就好了不需要a=这种去赋值
2.点击完按钮清空input，这里不能newTodo=‘’，涉及深克隆问题，想了下，因为控制input的是value，而不是newTodo

//定义组件
    class App extends React.Component{
    
    
      constructor(props){
    
    
        super(props)
        //初始化数据
        this.state = {
    
    
          todos: ['吃饭', '睡觉', '打豆豆']
        }
        this.add = this.add.bind(this)
      }
      add(newTodo){
    
    
        console.log(newTodo)
        //更新状态
        let todos = this.state.todos
        todos.unshift(newTodo)
        this.setState({
    
    
          todos
        })
      }
      render(){
    
    
        let {
    
    todos} = this.state
        return(
          <div>
            <h2>Simple TODO List</h2>
            <AddTodo add={
    
    this.add} todos={
    
    todos}/>
            <TodoList todos={
    
    todos}/>
          </div>
        )
      }
    }
    //定义AddTodo
    class AddTodo extends React.Component{
    
    
      constructor(props){
    
    
        super(props)
        this.addTodo = this.addTodo.bind(this)
      }
      addTodo(){
    
    
        //收集数据
        let newTodo = this.refs.newTodo.value
        //判断是否输入合法
        if(!newTodo.trim()){
    
    
          alert('不能为空')
          return
        }
        this.props.add(newTodo)
        this.refs.newTodo.value = ''
      }
      render(){
    
    
        return(
          <div>
            <input ref='newTodo' type="text"/>
            <button onClick={
    
    this.addTodo}>Add{
    
    this.props.todos.length}</button>
          </div>
        )
      }
    }
    //定义TodoList
    class TodoList extends React.Component{
    
    
      render(){
    
    
        let {
    
    todos} = this.props
        return(
          <ul>
            {
    
    
              todos.map((item, index) => {
    
    
                return <li key={
    
    index}>{
    
    item}</li>
            })
            }
            
          </ul>
        )
      }
    }
    ReactDOM.render(<App/>, document.getElementById('example'))

props与state的区别

props只能去读，state可以改变
props中数据是组件外传来的，state是组件内部初始化的数据，私有的

受控组件

react虽然是一个单向数据流，但是我们可以通过state去控制组件，去达到双向数据的显示效果，这种叫受控组件

可以跟随输入框输入变化显示
这里我想让输入框没有值下面的p标签显示‘’请输入‘’，弄了半天逻辑错了。。低级错误，我写这样可能有点麻烦，但是看看后面学习中人家怎么做的吧
注意的是这里的onChange，在键盘按下的一刻就会触发

  class TowWay extends React.Component{
    
    
      constructor(props){
    
    
          super(props)
          this.state = {
    
    
              msg: '',
              show: true
          }
          this.handleChange = this.handleChange.bind(this)
      }
      handleChange(event){
    
    
        if(event.target.value.trim()){
    
    
              this.setState({
    
    
              msg: event.target.value,
              show: false
              })
          }else{
    
    
            this.setState({
    
    
              msg: event.target.value,
              show: true
          }) 
          }    
          console.log(event.target.value)
      }
      render(){
    
    
          let {
    
    msg, show} = this.state
          return(
              <div>
                <input onChange={
    
    this.handleChange} type="text" />
                <p>{
    
    show? '请输入':msg}</p>
              </div>
          )
      }
  }
  ReactDOM.render(<TowWay/>, document.getElementById('example'))

下午继续！