React.js如何存储字体族为数组在Select选项中使用切换输入框字体

实现思路 #

• 定义符合react-select格式要求的字体族选项数组，作为下拉数据源
• 通过React状态管理当前选中的字体值
• 同步更新Select组件自身样式、文本输入框的字体样式，实现选中即切换的效果
• 移除原有代码中写在Select内部的原生<option>标签，改用react-select要求的options属性传值

完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

// 可选字体列表，可根据需要自行增删
const fontOptions = [
  { value: "Times New Roman", label: "Times New Roman" },
  { value: "Arial", label: "Arial" },
  { value: "Courier New", label: "Courier New" },
  { value: "SimSun", label: "宋体" },
  { value: "Microsoft YaHei", label: "微软雅黑" },
  { value: "KaiTi", label: "楷体" }
];

function App() {
  // 状态存储当前选中字体，默认选中Times New Roman
  const [selectedFont, setSelectedFont] = useState(fontOptions[0]);

  // Select组件样式随选中字体动态变化
  const dynamicSelectStyles = {
    control: (base) => ({
      ...base,
      fontFamily: selectedFont.value
    }),
    menu: (base) => ({
      ...base,
      fontFamily: selectedFont.value
    })
  };

  return (
    <div className="App" style={{ padding: 24, maxWidth: 480, margin: "0 auto" }}>
      <div style={{ marginBottom: 8 }}>选择字体：</div>
      <Select
        className="select"
        styles={dynamicSelectStyles}
        options={fontOptions}
        value={selectedFont}
        onChange={(option) => setSelectedFont(option)}
      />

      <div style={{ margin: "24px 0 8px" }}>测试文本输入区：</div>
      <textarea
        style={{
          width: "100%",
          minHeight: 120,
          padding: 12,
          fontSize: 16,
          borderRadius: 4,
          border: "1px solid #ddd",
          // 动态绑定选中的字体
          fontFamily: selectedFont.value
        }}
        placeholder="输入文本查看字体切换效果"
      />
    </div>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

注意点 #

• react-select不支持原生option子元素写法，所有下拉选项必须通过options属性传入，每个选项需要包含value（实际生效值）和label（下拉显示文本）字段
• 不要把Select的样式写死为固定字体，要根据选中状态动态生成样式对象，保证下拉组件本身的字体和选中值匹配
• 切换选中项时React会自动触发重渲染，文本输入区的字体不需要额外操作就会同步更新

内容的提问来源于stack exchange，提问作者Sohaib Ashraf