1 在构造函数中绑定this
export default class BindEvent extends React.Component{
constructor(){
super();
this.state={}
this.myclickhandler=this.myclickhandler.bind(this);
}
myclickhandler(e){ //参数e
var value = e.target.value;
this.setState({})
}
render(){
return <div>事件
<input type="submit" onChange={this.myclickhandler}/> 参数e隐性传递
</div>;
}
}
如果是父子组件,参数也是隐式传递的
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
//调用 父组件 中对应的方法。
this.props.onTemperatureChange(e.target.value);
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature: '', scale: 'c'};
}
handleCelsiusChange(temperature) { //参数temperature
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
);
}
}
2.箭头函数的方式:
使用箭头函数的方式进行事件绑定的时候,所有的参数都是要显式传递的。
最近新建react项目后,使用下面的方法定义函数,项目跑不起来。后又装了一个包才行
cnpm i @babel/plugin-proposal-class-properties -D
并在babelrc的plugins里面添加上"@babel/plugin-proposal-class-properties"
可是我记得我以前 使用这个方法写事件处理的时候是没有装这个的啊
export default class BindEvent extends React.Component{
constructor(){
super();
this.state={}
}
myclickhandler=(e)=>{ //参数e
var value = e.target.value;
this.setState({})
}
render(){
return <div>事件
<input type="submit" onChange={(e)=>this.myclickhandler(e)}/> 参数 e 显性传递
</div>;
}
}
同理,父子组件之间也是如此,用同样的例子进行说明
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
}
handleChange=(e)=> {
//调用 父组件 中对应的方法。
this.props.onTemperatureChange(e.target.value);
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={(e)=>this.handleChange(e)} />
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {temperature: '', scale: 'c'};
}
handleCelsiusChange=(temperature)=> { //参数temperature
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange=(temperature)=> {
this.setState({scale: 'f', temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={(arg)=>this.handleCelsiusChange(arg)} /> 参数必须显式传递
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={(arg)=>this.handleCelsiusChange(arg)} />
);
}
}
上面的代码是React官网文档中的实例React核心概念之状态提升,官网使用的是第一种方式绑定事件。我自己对照着教程学习的时候使用的是箭头函数的方法绑定事件,一开始在父组件中忘记显式得传递参数会一直报错
第一个arg不加
error:Uncaught ReferenceError: arg is not defined
第二个/或者第一第二个arg都不加
error:backend.js:6 Warning: A component is changing a controlled input of type undefined to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component
emmm,所以喜欢使用箭头函数得盆友还是多多注意~~