React中的this指向问题

//受控表单实例

export default class FormControl extends Component {
    state = {
        username: 'atguigu',
        password: '123123',
        sex: '0'
    }
    save(e) {
        // 阻止默认行为
        e.preventDefault();
        console.log('save')
        console.log('username: ', this.state.username);
        console.log('password: ', this.state.password);
    }

    change(e) {
        this.setState({   
            [e.target.name]: e.target.value
        })
    }
    render() {
        let { username, password,sex } = this.state;
        return (
            <>
                <form action="" onSubmit={this.save.bind(this)}>
                    {/* 
                        当把状态数据，赋值给表单的value属性，该表单元素受控
                        表单受控后果：
                        1. 表单的内容变成只读的了，不能修改了
                        2. 如果受控还想能够让用户输入新内容，需要给受控的表单添加 onChange 事
                        件，在onChange的事件处理函数中，获取用户最新的输入，用用户最新的输入
                        值，给状态赋值，即可解除只读属性
                        3. 组件受控，并通过onChange绑定状态，实现了状态数据和表单值的双向绑定
                    */}

				
                    <p>姓名： <input type="text" name="username" value={username} onChange={this.change.bind(this)} /></p>

                    <p>密码： <input type="text" name="password" value={password} onChange={this.change.bind(this)} /></p>
                    <p>
                        性别： 男 <input type="radio" name="sex" value="1" checked={sex === '1'} onChange={this.change.bind(this)}/>
                        女 <input type="radio" name="sex" value="0" checked={sex==='0'} onChange={this.change.bind(this)}/>
                    </p>

                    <hr />

//关键语句分析

change(e) {
        this.setState({   //当onChange={this.change}未使用bind(this)时，change()函数中的this指向window
            [e.target.name]: e.target.value
        })
    }

//this.change.bind(this)中第一个this是调用必须要带的，第二个this的作用是使change函数调用时指向实例对象
<p>姓名： <input type="text" name="username" value={username} onChange={this.change.bind(this)} /></p>
                        
 
                        
第一个 this 的作用
	指向组件实例：第一个 this 指的是当前的 React 组件实例。在 JSX 代码中，this 一般代表组件类的实例。通过 this.change，你正在访问组件实例的 change 方法
背后的细节
	访问组件方法：this.change 是指向组件实例上的 change 方法。因为 change 方法是在你的组件类内部定义的，所以通过 this 来访问它
	绑定作用域：当你使用 this.change.bind(this) 时，第一个 this 是在访问 change 方法，第二个 this 是在将 change 方法的执行上下文绑定到当前组件实例上，以确保 change 方法内部的 this 仍然指向组件实例