傳遞額外的參數給onChange監聽器在reactjs

Question

我看到一個onChange監聽器通常不會有除e以外的額外參數。

handleOnChange(e) { 
    this.setState({email: e.target.value}); 
} 

但是仍然可以傳遞額外的參數嗎？就像這樣：

handleOnChange(e,key) { 
    this.setState({[key]: e.target.value}); 
} 

我修改了代碼從this thread做出了榜樣

class FormInput extends React.Component{ 

    consturctor(props){ 
     super(props); 
     this.state = {email:false,password:false} 
    } 

    handleOnChange(e,key) { 
     this.setState({[key]: e.target.value}); 
    } 

    render() { 
      return 
      <form> 
       <input type="text" name="email" placeholder="Email" onChange={this.handleOnChange('email')} /> 
       <input type="password" name="password" placeholder="Password" onChange={this.handleOnChange('password')}/> 
       <button type="button" onClick={this.handleLogin}>Zogin</button> 
      </form>; 
    } 
} 

Answer 1

您可以創建一個匿名函數，調用handleOnChange您的自定義鍵。這將是這樣的：

<button type="button" onClick={(e) => this.handleLogin(e, index)}> 

如果你還沒有使用匿名函數之前，這是告訴JavaScript的合作，動態創建一個新的功能中呈現，這需要一個參數e和調用this.handleLogin（E，指數）。在JavaScript中，匿名函數會繼承範圍，所以「this」關鍵字的範圍將會正確。

Answer 2

幾個方法可以做到這一點：

1. 添加屬性/或元素

   類的formInput擴展組件{

   onChange(e) { 
       const { target } = e; 
       const key = target.getAttribute('name'); 
   } 
   

   }

2. 訪問屬性

   在創建onChange函數時綁定額外的屬性（部分）

<input name='password' onChange={this.onChange.bind('password')} /> 
//or 
<input name='password' onChange={(e) => this.onChange('password',e)} /> 

Do note that you would need to change the order of the onChange function 

onChange(key,e) { 
    //key is passed here 
} 


This is usually not advisable because you would create the function on each render call. See if its fine on your case 

列表項

最後你可以用的元素，並從那裏只是通過什麼調用者需要在onChange

class Input extends Component { 

     dispatchOnChange(e) { 
      const { props } = this; 
      const { name } = props; 
      const value = e.target.value; 
      props.onChange(name,value); 
     } 

     render() { 
      return <input {...this.props} onChange={this.dispatchOnChange}/> 
     } 
    } 

    //your render 
    <Input type="password" name="password" placeholder="Password" onChange={this.handleOnChange}/> 

希望這有助於