javascript - 将额外的参数传递给 reactjs 中的 onChange Listener

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

一些方法可以做到这一点:

1. 添加属性/或从元素访问属性

使用这段代码:

class FormInput extends Component{
      onChange(e) {
          const { target } = e;
          const key = target.getAttribute('name');
      }
}

1. 在创建 onChange 函数时绑定(bind)额外的属性(部分)

使用这段代码:

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

请注意，您需要更改 onChange 函数的顺序

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

这通常是不可取的，因为您会在每次渲染调用时创建该函数。看看它是否适合你的情况

1. 列表项

最后你可以包装元素并从那里传递调用者在 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}/>

希望对你有帮助