reactjs - 高阶组件 - 监听 onChange

Question

我正在开发一个 HOC，以帮助处理我的 React 应用程序中的表单(用于练习)。

// components/Wrapper.js
import React from 'react';

export default WrappedComponent => class extends React.Component {
  constructor() {
    super();

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    console.log(e.target.value);
  }

  onSubmit(e) {
    e.preventDefault();
    console.log("Submitting form...");
  }

  render() {
    return <WrappedComponent {...this.props} onSubmit={this.onSubmit} onChange={this.onChange}/>;
  }
};

然后我使用以下方法从主索引文件中导出:

export Wrapper from './components/Wrapper';

然后我可以这样做:

// LoginPage.js
import { Wrapper } from '../Somewhere'  

...
<form onSubmit={this.props.onSubmit}>
  <label>Email Address</label>
  <input type="text" name="email" onChange={this.props.onChange}/>
  <label>Password</label>
  <input type="password" name="password" onChange={this.props.onChange}/>
  <input type="submit" value="Login"/>
</form>
...

然后我使用:

export default Wrapper(LoginPage);

我正在努力使其尽可能易于使用(因为其他人可能会使用它)。因此，我希望能够删除 input 框中的 onChange Prop ，并以某种方式构建此功能，以便 onChanges 被自动检测到HOC。

如何构建可用于将自动添加 onChange 的输入框的组件？

Answer 1

你需要在你的 react 组件中包装 html 元素输入，并设置 defaultProps: onChange: () => {}，并定义其他 Prop ，如输入类型等......

然后将此输入标记为组件:

<form onSubmit={this.props.onSubmit}>
  <CustomInput type="text" label="Login" .../>
</form>