react学习（一）
1、React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。
<input ref="tips" />
//可以用这种方式 如果想选择这个DOM节点的话 可以用react的方法ReactDOM.findDOMNode(this.refs.tips); //获得的是input的真实DOM元素
这种是直接设置的，ref也能接收回调函数例如：
<input ref={ref => this.name = ref}/>
this.name 获取的就是input的真实DOM元素
2、this的指向
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
answer: "水没有沸腾"
};
this.change = this.change.bind(this) //下面不用箭头函数 需要在这里指定this
}
//这里如果不用箭头函数的话 this不是指向Calculator 但是也可以在上面绑定给change
change = (e) => {
console.log(this.xxx.value);
const answer = this.xxx.value;
this.setState({value: this.xxx.value});
if (answer <= 100) {
this.setState({answer:"水没有沸腾"});
}else{
this.setState({answer:"水沸腾了"});
}
};
render() {
const value = this.state.value;
return (
<fieldset>
<legend>请输入温度</legend>
<input
ref={ref => this.xxx = ref}
onChange={this.change}/>
<span>{this.state.answer}</span>
</fieldset>
);
}
}
基本翻译
n. （青少年禁看的）X级片或内容
num. 罗马数字30
