06在组件中传值和定义事件

传值

1. 自定义属性传值：除了原有的属性如id className等之外的属性

class MyApp extends React.Component {
    render() {
        return (<div>
            <Header title="我的标题1"/>
        </div>)
    }
}

class Header extends React.Component {
    render () {
        return (
            <div>
                <h1>{this.props.title}</h1>
                {/* 谁调用就是用谁传过来的东西 */}
            </div>)
    }
}

传值部分完整代码：
典型部分 MyApp -> Options -> Option

class MyApp extends React.Component {
    render() {
        const title = "帮你决定ba";
        const subTitle = "把你的命交给电脑吧";
        const options = ["鲁班7号", "小乔", "蔡文姬"];
        return (
            <div>
                <Header title={title} subTitle={subTitle}/>
                <Action />
                <Options options={options}/>
                <AddOption />
            </div>
        )
    }
}
// 小组件
class Header extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <p>{this.props.subTitle}</p>
            </div>
        )
    }
}
class Action extends React.Component {
    render() {
        return (
            <div>
                <button>随机输出</button>
            </div>
        )
    }
}
class Options extends React.Component {
    render() {
        return (
            <div>
                {this.props.options.map( (option, index) => {
                    // return <p key={index}>{option}</p>
                    return <Option key={index} option={option}/>
                })}
                {/* <Option />
                <Option />
                <Option /> */}
            </div>
        )
    }
}
class Option extends React.Component {
    render() {
        console.log(this.props)
        return (
        <div>{this.props.option}</div>
        )
    }
}
class AddOption extends React.Component {
    render() {
        return (
            <div>我是AddOption</div>
        )
    }
}
ReactDOM.render(<MyApp />, document.getElementById("app"));

事件

1. 组件中定义事件函数

class Action extends React.Component {
    handlePick() {
        alert('输出')
    }
    render() {
        return (
            <div>
                <button 
                    onClick={this.handlePick}
                    disabled={!this.props.hasOptions}>
                    随机机输出一个选项
                </button>
            </div>
        )
    }
}

this指向丢失：
当我想重新开始清空options中的数组，在定义的事件中用this.props.options就会报错。

class Options extends React.Component {
    handleRemoveAll() {
        console.log(this.props.options)
    }
    render() {
        return (
            <div>
                <button onClick={this.handleRemoveAll}>重新开始</button>
                {this.props.options.map( (option, index) => {
                    return <Option key={index} option={option}/>
                })}
            </div>
        )
    }
}

这是因为非严格模式下指向window，严格模式下指向undefined。这里是因为编译成严格模式。
类似：

const obj = {
    id: 1,
    fn() {
        console.log(this.id)
    }
}
obj.fn();

const obj = {
    id: 1,
    fn() {
        console.log(this.id)
    }
}
// obj.fn();
const fn1 = obj.fn;
fn1();

严格模式下等于undefined。
解决办法1：
使用bind()

class Options extends React.Component {
    handleRemoveAll() {
        console.log(this.props.options)
    }
    render() {
        return (
            <div>
                <button onClick={this.handleRemoveAll.bind(this)}>重新开始</button>
                {this.props.options.map( (option, index) => {
                    return <Option key={index} option={option}/>
                })}
            </div>
        )
    }
}

这里的this指向当前数组的实例。

解决办法2：
使用constructor在初始化的时候绑定this指向。

class Options extends React.Component {
    constructor(props) {
        super(props)
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        // 初始化绑定this指向
    }
    handleRemoveAll() {
        console.log(this.props.options)
    }
    render() {
        return (
            <div>
                <button onClick={this.handleRemoveAll}>重新开始</button>
                {this.props.options.map( (option, index) => {
                    return <Option key={index} option={option}/>
                })}
            </div>
        )
    }
}

全部代码：

class MyApp extends React.Component {
    render() {
        const title = "帮你决定ba";
        const subTitle = "把你的命交给电脑吧";
        const options = ["鲁班7号", "小乔", "蔡文姬"];
        return (
            <div>
                <Header title={title} subTitle={subTitle}/>
                <Action />
                <Options options={options}/>
                <AddOption />
            </div>
        )
    }
}
// 小组件
class Header extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <p>{this.props.subTitle}</p>
            </div>
        )
    }
}
class Action extends React.Component {
    handlePick() {
        alert("输出了")
    }
    render() {
        return (
            <div>
                <button onClick={this.handlePick}>随机输出</button>
            </div>
        )
    }
}

// const obj = {
//     id: 1,
//     fn() {
//         console.log(this.id)
//     }
// }
// obj.fn();
// const fn1 = obj.fn;
// fn1();

class Options extends React.Component {
    constructor(props) {
        super(props)
        this.handleRemoveAll = this.handleRemoveAll.bind(this);
        // 初始化绑定this指向
    }
    handleRemoveAll() {
        console.log(this.props.options)
        
    }
    render() {
        return (
            <div>
                <button onClick={this.handleRemoveAll}>重新开始</button>
                {this.props.options.map( (option, index) => {
                    return <Option key={index} option={option}/>
                })}
            </div>
        )
    }
}
class Option extends React.Component {
    render() {
        // console.log(this.props)
        return (
        <div>{this.props.option}</div>
        )
    }
}
class AddOption extends React.Component {
    formSubmit(e) {
        e.preventDefault();
        let option = e.target.elements.option.value.trim();
        if(option) {
            alert(option)
        }
        e.target.elements.option.value = "";
    }
    render() {
        return (
            <div>
                <form  onSubmit={this.formSubmit}>
                    <input type="text" name="option" placeholder="请输入要新增的英雄"/>
                    <button>新增英雄</button>
                    <button>普通按钮</button>
                </form>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />, document.getElementById("app"));