react事件傳參問題

第一個參數(shù)e是指Event 對象
如，這里是用es6語法簡寫了

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

第二個是為了不通對象調(diào)用同一個方法時能用type區(qū)分對象，

      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')
        )

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

給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）因此應(yīng)該傳實參比如空字符串

還要注意一點就是如果使用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>
    )
  }

這種傳參一般是應(yīng)用在給當前的事件加一個特殊的標記，可以讓不同的元素運行同一個方法，從而做不同的處理

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