Notes On React - Three

事件处理

  React 中事件绑定属性的命名采用驼峰命名，且采用了 JSX 语法的时候需要传递一个函数作为时间处理函数(非一般DOM写法中的函数名-字符串)；在 React 必须明确使用 preventDefault 来阻止事件的默认行为，而 return false 不能起阻止事件的默认行为。

class Action extends React.Component {
    constructor(props) {
        super(props);
    }

    handleClick(e) {
        e.preventDefault();
        console.log('The link was prevented.');
        console.log(this);
    }

    render() {
        return (
            <a href="www.baidu.com" onClick={this.handleClick}>Click Me</a>
        );
    }
}

  点击后发现默认事件(链接跳转)被阻止，this 指向为 undefined (类的方法默认是不会绑定 this 的)。因此，需要手动为方法绑定 this 。

class Action extends React.Component {
    constructor(props) {
        super(props);
        this.state = {num: 0};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
        console.log(this.state.num);
    }

    render() {
        return (
            <a href="www.baidu.com" onClick={this.handleClick}>Click Me</a>
        );
    }
}

  在事件处理中，可用 bind 来监听传递到函数中的参数。

class Action extends React.Component {
    constructor(props) {
        super(props);
        this.state = {num: 0};
        this.handleClick = this.handleClick.bind(this, this.state.num);
    }

    handleClick(num, e) {
        e.preventDefault();
        console.log('The link was clicked.');
        console.log(num);
    }

    render() {
        return (
            <a href="www.baidu.com" onClick={this.handleClick}>Click Me</a>
        );
    }
}

  通过 bind 的方式，事件对象以及更多的参数会被隐式的进行传递，在组件中的定义监听函数，事件对象 e 要排在所传递的参数后面。
  

表单

  React 中负责渲染表单的组件通常将表单的属性保存在 state 中，只能通过 setState() 改变 state 来更新表单。

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        this.setState({value: e.target.value});
    }

    handleSubmit(e) {
        console.log('The Input Name:' + this.state.value);
        e.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

  通过 setState() 方法来在提交(submit)时将输入的值储存在 state 中；再从 state 中读到改值。
  

状态提升

  当多个组件需要共用 prop 数据时，可以将这部分 prop 提升至其父组件进行管理。