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

我试图让它尽可能易于使用（如果有其他人可能会使用它）。因此，我希望能够移除onChange框中的input道具并以某种方式构建此功能，以便HOC自动检测到onChanges。

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

Answer 1

您需要在您的react组件中包装html元素输入，并设置defaultProps：onChange :(）=＆gt; {}，并定义其他道具，如输入类型等......

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

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

Answer 2

获取输入值的另一种方法是：

  handleSubmit = e => {
    e.preventDefault();

    const name = ReactDOM.findDOMNode(this._nameInput).value;
    const email = ReactDOM.findDOMNode(this._emailInput).value;
    const password = ReactDOM.findDOMNode(this._passwordInput).value;


    // submit the data...
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          ref={nameInput => this._nameInput}
          type="text"
          placeholder="Name"
        />
        <input
          ref={emailInput => this._emailInput}
          type="text"
          placeholder="Email"
        />
        <input
          ref={passwordInput => this._passwordInput}
          type="password"
          placeholder="Password"
        />

        <button type="submit">Submit</button>
      </form>
    );
  }

希望有帮助。

高阶组件 - 监听onChange

2 个答案: