React组件二 - 从零开始学React小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。绑定this并传参

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绑定this并传参的三种方式

在事件中绑定this并传参：

{/* bind的作用：为前面的函数，修改函数内部的this指向，让函数内部的this，指向bind参数列表中的第一个参数 */}
{/* bind和call、apply */}
{/*call、apply修改完this指向后，会立即调用前面的函数，但是bind只能修改this指向，并不会调用  */}
{/* bind中第一参数用来修改this指向，第一个后面的参数，都会是前面函数的参数 */}
    <input type="button" value="在事件中绑定this并传参" onClick={this.handleMsg1.bind(this, '🍕', '🍟')} />

    // 在事件中绑定this并传参
    handleMsg1(arg1, arg2) {
        console.log(this);
        // 此时this是个null
        this.setState({
            msg: '在事件中绑定this并传参：' + arg1 + arg2
        });
    }

在构造函数中绑定this并传参:

    // 修改构造函数中的代码：
    this.handleMsg2 = this.handleMsg2.bind(this, '🚗', '🚚');

    <input type="button" value="在构造函数中绑定this并传参" onClick={this.handleMsg2} />

    // 在构造函数中绑定this并传参
    handleMsg2(arg1, arg2) {
        this.setState({
            msg: '在构造函数中绑定this并传参：' + arg1 + arg2
        });
    }

用箭头函数绑定this并传参：

    <input type="button" value="用箭头函数绑定this并传参" onClick={() => { this.handleMsg3('👩', '👰') }} />

    // 用箭头函数绑定this并传参
        handleMsg3(arg1, arg2) {
            this.setState({
                msg: '用箭头函数绑定this并传参：' + arg1 + arg2
            });
        }
        
        
注意：
<input type="button" value="用箭头函数绑定this并传参" onClick={this.handleMsg3('👩', '👰') }/>
！！！onClick={如果传参（加括号）。此中函数，会自动调用}

 handleMsg3=(arg1, arg2)=>{
            this.setState({
                msg: '用箭头函数绑定this并传参：' + arg1 + arg2
            });
        }

绑定文本框与state中的值

在Vue.js中，默认可以通过v-model指令，将表单控件和我们的data上面的属性进行双向数据绑定，数据变化和页面之间的变化是同步的！
在React.js中，默认没有提供双向数据绑定这一功能，默认的，只能把state之上的数据同步到界面的控件上，但是不能默认实现把界面上数据的改变，同步到state之上，需要程序员手动调用相关的事件，来进行逆向的数据传输！
绑定文本框和state的值：

    {/*只要将value属性，和state上的状态进行绑定，那么，这个表单元素就变成了受控表单元素，这时候，如果没有调用相关的事件，是无法手动修改表单元素中的值的*/}
    <input style={{ width: '100%' }} ref="txt" type="text" value={this.state.msg} onChange={this.handleTextChange} />

    // 这是文本框内容改变时候的处理函数
    handleTextChange = () => {
    1/获取文本框中最新文本的3种方式:
    /1.使用doctunent.getElenentByld来拿
    2.使用ref来拿
    // console.log(this.refs.txt.value);
    1/3.使用事件对象的参数e来拿e.target就表示触发这个事件的事件源对象，    得到的是一个原生的JS DOM对象
    / console.logfe.target.value);

        this.setState({
            msg: this.refs.txt.value
        });
    }

注意setState的一个问题：

// 保存最新的state状态值，在保存的时候，是异步地进行保存的，所以，如果想要获取最新的，刚刚保存的那个状态，需要通过回掉函数的形式去获取最新state
this.setState({
    msg: this.refs.txt.value
    // msg: e.target.value
}, function () {
    // 获取最新的state状态值
    console.log(this.state.msg);
});

发表评论案例

子组件向父组件传递数据

React中，数据是从上向下流动的，也就是一个父组件可以把它的 state/props通过props传递给它的子组件，但是子组件，不能修改props，如果组件需要修改父组件中的数据，则可以通过回调的方法来完成，
说白了就是子组件想要修改父组件的值，就是在父组件调用子组件的地方，传递一个方法，该方法首先在父组件中定义，子组件通过props的获取到父组件传递的方法，子组件就可以调用该方法

子组件==》父组件传递数据
vue： 
子组件中【 抛出事件监听 $emit(事件名，参数)  】
父组件中【监听事件    @事件名='父组件中的事件处理函数'   】

react：
子组件中：【在事件中，使用 this.props.自定义事件名（参数/传递的数据）】
父组件中：【父组件调用子组件的地方，添加一个事件监听，来监听子组件中挂载在props属性中的事件】

父组件调用子组件
<Cmtbox senddata={this.send}></Cmtbox>
send=(e)=>{
    console.log(e);
    this.state.list.unshift(e);
    this.setState({
      list:this.state.list
    });
  }
  
子组件
<input type="button" value="发表评论" onClick={this.send}/>
send(){
    let obj = {
      user: this.use.current.value,
      content: this.cont.current.value
    }
    this.props.senddata(obj);
  }