React绑定事件方式与传参

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不加

<InputTemp unit="Celsius" temp={celsius} onTemperatureChange={()=>this.saveCelsius(arg)}></InputTemp>

error：Uncaught ReferenceError: arg is not defined

第二个/或者第一第二个arg都不加

<InputTemp unit="Celsius" temp={celsius} onTemperatureChange={()=>this.saveCelsius()}></InputTemp>       

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,所以喜欢使用箭头函数得盆友还是多多注意~~