React重构简易输入组件：多组件复用输入逻辑方案咨询

这是个很典型的组件复用场景，我们可以通过抽离出一个通用的输入组件，把重复的输入框代码和状态更新逻辑解耦，让每个业务组件只需要关注自己的状态管理即可。下面是具体的实现步骤：

1. 创建通用的可复用输入组件 #

我们先封装一个FormInput组件，它接收所有需要自定义的属性和回调函数，把重复的input标签逻辑放在这里：

import React from 'react';

// 通用输入组件，接收props传递的配置和回调
const FormInput = ({ type, name, value, placeholder, onChange }) => {
  return (
    <input
      type={type}
      name={name}
      value={value}
      placeholder={placeholder}
      onChange={onChange}
    />
  );
};

export default FormInput;

这个组件的核心是把可变的部分通过props传入，比如输入框类型、name属性、绑定的值、占位符，以及状态更新的回调函数，这样它就可以适配各种输入场景。

2. 在业务组件中使用通用输入组件 #

接下来，在需要使用输入框的业务组件里，你只需要维护自己的state，并实现一次状态更新的方法（不用每个组件重复写），然后把对应的值和方法传给FormInput即可。

类组件示例 #

如果你的项目还在使用类组件，写法如下：

import React, { Component } from 'react';
import FormInput from './FormInput';

class LoginComponent extends Component {
  // 初始化组件状态
  state = {
    user: {
      username: '',
      password: ''
    }
  };

  // 统一的状态更新方法，只需要写一次
  handleChange = (event) => {
    const { name, value } = event.target;
    // 如果state是嵌套结构，要注意浅拷贝避免修改原状态
    this.setState(prevState => ({
      user: {
        ...prevState.user,
        [name]: value
      }
    }));
  };

  render() {
    const { user } = this.state;
    return (
      <div className="login-form">
        {/* 调用通用输入组件，传入对应配置 */}
        <FormInput
          type="text"
          name="username"
          value={user.username}
          placeholder="username"
          onChange={this.handleChange}
        />
        <FormInput
          type="password"
          name="password"
          value={user.password}
          placeholder="password"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default LoginComponent;

函数组件（Hooks）示例 #

如果项目用的是函数组件+Hooks，写法会更简洁：

import React, { useState } from 'react';
import FormInput from './FormInput';

const LoginComponent = () => {
  // 用useState初始化状态
  const [user, setUser] = useState({ username: '', password: '' });

  // 统一的状态更新方法
  const handleChange = (event) => {
    const { name, value } = event.target;
    setUser(prevState => ({ ...prevState, [name]: value }));
  };

  return (
    <div className="login-form">
      <FormInput
        type="text"
        name="username"
        value={user.username}
        placeholder="username"
        onChange={handleChange}
      />
      <FormInput
        type="password"
        name="password"
        value={user.password}
        placeholder="password"
        onChange={handleChange}
      />
    </div>
  );
};

export default LoginComponent;

3. 扩展优化（可选） #

如果后续需要给输入框添加更多功能，比如表单验证、错误提示、样式定制，只需要在FormInput组件里扩展即可，所有使用它的业务组件都会自动受益，不用逐个修改。比如添加错误提示：

const FormInput = ({ type, name, value, placeholder, onChange, error }) => {
  return (
    <div className="form-input-group">
      <input
        type={type}
        name={name}
        value={value}
        placeholder={placeholder}
        onChange={onChange}
        className={error ? 'input-error' : ''}
      />
      {error && <span className="error-message">{error}</span>}
    </div>
  );
};

这样一来，你就彻底告别了重复复制粘贴输入框代码和状态更新方法的麻烦，代码复用性和可维护性都会大大提升。

内容的提问来源于stack exchange，提问作者Lionel B