在react本机中选择下拉项时显示文本输入字段

在React中，要实现在选择下拉项时显示文本输入字段，可以使用React的受控组件和状态管理来实现。

首先，需要创建一个React组件来表示下拉选择框和文本输入字段的组合。组件的状态应该包括当前选择的下拉项和文本输入字段的值。

import React, { useState } from 'react';

const DropdownInput = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [textInput, setTextInput] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const handleTextChange = (event) => {
    setTextInput(event.target.value);
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleOptionChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>
      {selectedOption === '' && (
        <input type="text" value={textInput} onChange={handleTextChange} />
      )}
    </div>
  );
};

export default DropdownInput;

在上面的代码中，我们使用了React的useState钩子来管理组件的状态。selectedOption表示当前选择的下拉项，textInput表示文本输入字段的值。handleOptionChange和handleTextChange分别是下拉项和文本输入字段值改变时的事件处理函数。

在组件的返回值中，我们使用<select>元素来创建下拉选择框，并通过value属性和onChange事件来绑定状态和事件处理函数。在<select>元素内部，我们定义了一些<option>元素作为下拉项。

当选择的下拉项为空时，我们使用条件渲染来显示文本输入字段。通过<input>元素的type属性为text，并通过value属性和onChange事件来绑定状态和事件处理函数。

这样，当选择下拉项时，文本输入字段会隐藏起来，当选择的下拉项为空时，文本输入字段会显示出来。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。对于React的开发，你可以使用腾讯云的云开发平台，其中包括云函数、云数据库、云存储等服务，以便更好地支持你的React应用的开发和部署。你可以访问腾讯云开发者中心了解更多相关产品和服务：腾讯云开发者中心。