React中如何将输入的特定标题文本替换为对应图标显示？

你的核心问题在于把React元素（<FontAwesomeIcon>）直接赋值给了input的value属性，而input的value仅支持字符串类型，这会导致表单控件无法正常工作。要实现输入特定文本后显示图标的需求，需要将「用户输入的原始文本」和「最终展示内容」分开处理：

1. 调整State结构 #

只维护一个存储用户输入文本的state，不要把JSX存在state里：

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const YourFormComponent = () => {
  // 仅存储用户输入的原始文本
  const [inputValue, setInputValue] = useState('');

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以添加表单提交逻辑，比如将inputValue保存到后端
  };

2. 修正输入处理函数 #

只更新输入文本的state，不需要在这里替换为图标：

const handleTitleChange = (ev) => {
    setInputValue(ev.target.value);
  };

3. 完善表单控件与展示逻辑 #

input始终绑定原始输入文本保证输入功能正常，在提交后的展示区域根据输入值判断渲染图标或文本：

return (
    <Form noValidate onSubmit={handleSubmit}>
      <Form.Row>
        <Form.Group as={Col} md="7" controlId="title">
          <Form.Label>Title</Form.Label>
          <Form.Control
            type="text"
            name="title"
            placeholder="Title"
            value={inputValue}
            onChange={handleTitleChange}
            isInvalid={!inputValue}
          />
          <Form.Control.Feedback type="invalid">请输入标题</Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
      <button type="submit" className="mt-2">保存</button>

      {/* 提交后的内容展示区 */}
      <div className="mt-3">
        <span>已保存内容：</span>
        {inputValue === 'soccer' ? (
          <FontAwesomeIcon icon="fa-solid fa-football" />
        ) : inputValue === 'basketball' ? (
          <FontAwesomeIcon icon="fa-solid fa-basketball" />
        ) : (
          inputValue
        )}
      </div>
    </Form>
  );
};

export default YourFormComponent;

关键说明 #

• 输入框本身始终显示用户输入的文本，保证输入交互逻辑正常；
• 图标替换逻辑放在提交后的展示区域，根据输入文本的值动态渲染；
• 不要将React元素存储在state中，state应优先存储原始数据（如字符串、数字），JSX渲染逻辑直接写在组件的return部分即可。

内容的提问来源于stack exchange，提问作者takis Paras