React项目实战小结：封装Input框的实践与经验

2024-02-05 17:45:30

在React项目中，封装Input框是一个常见的需求。本文将介绍如何在React项目中封装Input框，以及如何在点击列表项目时将项目名称动态传递给封装的Input框，以及父组件如何获取子组件封装好的Input值。

封装Input框

封装Input框的步骤如下：

创建一个新的React组件，例如Input.js。
在Input.js文件中，导入React和antd库。
定义一个名为Input的函数组件，并接受一个名为value的props。
在Input组件中，使用antd的Input组件来渲染一个输入框。
将value props传递给Input组件的value属性。
返回Input组件。

import React, { useState } from "react";
import { Input } from "antd";

const TextInput = (props) => {
  const [value, setValue] = useState(props.value);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <Input value={value} onChange={handleChange} />;
};

export default TextInput;

在点击列表项目时将项目名称动态传递给封装的Input框

为了在点击列表项目时将项目名称动态传递给封装的Input框，我们可以使用React的state和props机制。

首先，在父组件中，我们需要创建一个名为selectedItem的state变量，用于存储当前选中的列表项目。

import React, { useState } from "react";

const ParentComponent = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleListItemClick = (item) => {
    setSelectedItem(item);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id} onClick={() => handleListItemClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
      <TextInput value={selectedItem ? selectedItem.name : ""} />
    </div>
  );
};

export default ParentComponent;

然后，在子组件中，我们需要使用props来接收父组件传递的selectedItem值。

import React from "react";

const TextInput = (props) => {
  return <Input value={props.value} />;
};

export default TextInput;

当用户点击列表项目时，父组件会调用handleListItemClick()方法，并将选中的项目传递给setSelectedItem()方法。

setSelectedItem()方法会更新selectedItem state变量，并将新值传递给子组件的value props。

子组件会使用value props来渲染输入框的值。

父组件如何获取子组件的封装好的Input值

为了获取子组件封装好的Input值，我们可以使用React的ref机制。

首先，在父组件中，我们需要创建一个名为inputRef的ref变量。

import React, { useRef } from "react";

const ParentComponent = () => {
  const inputRef = useRef(null);

  const getValue = () => {
    console.log(inputRef.current.state.value);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id} onClick={() => handleListItemClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
      <TextInput ref={inputRef} value={selectedItem ? selectedItem.name : ""} />
      <button onClick={getValue}>获取值</button>
    </div>
  );
};

export default ParentComponent;

然后，在子组件中，我们需要使用useImperativeHandle()钩子来暴露一个名为getValue()的方法。

import React, { forwardRef } from "react";

const TextInput = forwardRef((props, ref) => {
  const getValue = () => {
    return ref.current.state.value;
  };

  useImperativeHandle(ref, () => ({
    getValue,
  }));

  return <Input value={props.value} />;
});

export default TextInput;