react事件传参问题

Question

<button onClick={e=>this.buttonHandle(e)}>button</button>

这个参数e指的是什么

<button onClick={this.buttonHandle.bind(this, e)}>button</button>

文档中第二种绑定方法为什么我无法实现

handler

buttonHandle(e){
   console.log(e)
}

Answer 1

第一个参数e是指Event 对象
如，这里是用es6语法简写了

onclick = function(e){
 buttonHandle(e)
}

第二个是为了不通对象调用同一个方法时能用type区分对象，

      var FormComponent = React.createClass({
　　getInitialState: function() {
　　　　return {name: '', gender: '男'};
　　},
　　render: function() {
　　　　return (<form>
　　　　　　　　　　<input ref="kkk" type='text' value={this.state.name} onChange={this.handlerChange.bind(this,'name')} />
　　　　　　　　　　<label htmlFor='male'>男</label>
　　　　　　　　　　<input id='male'
　　　　　　　　　　　　　　name='gender'
　　　　　　　　　　　　　　type='radio'
　　　　　　　　　　　　　　value='男'
　　　　　　　　　　　　　　checked={this.state.gender == '男'}
　　　　　　　　　　　　　　onChange={this.handlerChange.bind(this,'gender')} />
　　　　　　　　　　<label htmlFor='female'>女</label>
　　　　　　　　　　<input id='female'
　　　　　　　　　　　　　　name='gender'
　　　　　　　　　　　　　　type='radio'
　　　　　　　　　　　　　　value='女'
　　　　　　　　　　　　　　checked={this.state.gender == '女'}
　　　　　　　　　　　　　　onChange={this.handlerChange.bind(this,'gender')} />
　　　　　　　　</form>);
　　},
componentDidMount:function(){
   console.log(this.refs.kkk);
    },
　　handlerChange: function(type, event) {
　　　　var newState = {};
　　　　newState[type] = event.target.value;
　　　　this.setState(newState);
　　}
});
   ReactDOM.render(
            <FormComponent  />,
            document.querySelector('.aaa')
        )

Answer 2

首先声明，我是非常感激@陌路凡歌的回答，下面我对他的回答稍微做一下整理

给react的方法传参注意事项

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上面的id表示实参，不是形参， 参照下面的案例，注释部分不能传形参arg，所以注释部分运行起来会报错（arg is not defined）因此应该传实参比如空字符串

还要注意一点就是如果使用bind方法来传参，event这个形参是不写的

下面介绍具体案例

handleParentChange(arg, event) {
    this.setState({
      parentValue: arg || event.target.value
    })
  }

  render() {
    return (
      <div>
        // <input type="text" value={this.state.parentValue} onChange={this.handleParentChange.bind(this, arg)}/>
        <input type="text" value={this.state.parentValue} onChange={this.handleParentChange.bind(this, '')}/>
      </div>
    )
  }

这种传参一般是应用在给当前的事件加一个特殊的标记，可以让不同的元素运行同一个方法，从而做不同的处理

handleParentChange(arg, event) {
    this.setState({
      parentValue: event.target.value + arg 
    })
  }

  render() {
    return (
      <div>
        // <input type="text" value={this.state.parentValue} onChange={this.handleParentChange.bind(this, arg)}/>
        <input type="text" value={this.state.parentValue} onChange={this.handleParentChange.bind(this, 'first')}/>
        <input type="text" value={this.state.parentValue} onChange={this.handleParentChange.bind(this, 'second')}/>
      </div>
    )
  }

上面的两个输入框都输入1，第一个输入框显示的value就是1first，第二个输入框显示的value就是1second