React:如何获取自定义TextInput组件的值？

在React中，可以通过以下步骤获取自定义TextInput组件的值：

首先，在父组件中创建一个状态变量来存储TextInput的值。例如，可以使用useState钩子函数创建一个名为inputValue的状态变量：

const [inputValue, setInputValue] = useState('');

在TextInput组件中，添加一个onChange事件处理函数来更新输入的值，并通过props将值传递给父组件。例如，可以创建一个名为handleInputChange的函数：

const handleInputChange = (event) => {
  setInputValue(event.target.value);
}

return (
  <input type="text" onChange={handleInputChange} />
);

现在，父组件中的inputValue状态变量将保持最新的TextInput值。可以将其用作需要的任何目的，例如将其显示在页面上或传递给其他组件。

以下是一个完整的示例：

import React, { useState } from 'react';

const ParentComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <TextInput onChange={handleInputChange} />
      <p>输入的值为：{inputValue}</p>
    </div>
  );
}

const TextInput = ({ onChange }) => {
  return (
    <input type="text" onChange={onChange} />
  );
}

export default ParentComponent;

在这个示例中，TextInput组件通过props接收了一个onChange事件处理函数，该函数在输入框的值发生变化时被调用。父组件通过传递handleInputChange函数来更新inputValue状态变量，从而实时获取并显示TextInput的值。

关于React的更多信息和教程，请参考腾讯云React产品介绍页面：React 产品介绍。