如何在ReactJS只读input输入框中显示值并自动替换占位符为API返回结果

核心思路 #

React中input的value（输入框展示值）和placeholder（占位符）都支持绑定state变量，只需要在API请求成功后更新对应state，即可实现自动更新，只读属性通过React内置的readOnly属性设置即可。

实现步骤 #

• 初始化两个state变量，分别控制input的展示值和占位符
• 在组件挂载完成的生命周期钩子中发起API请求
• 请求成功后将返回值赋值给对应的state变量
• 将state变量绑定到input的对应属性上

完整代码示例 #

import { useState, useEffect } from 'react';

function ReadonlyInput() {
  // 初始化占位符，可自定义默认提示文案
  const [placeholder, setPlaceholder] = useState('待加载数据');
  // 初始化输入框展示值
  const [inputVal, setInputVal] = useState('');

  useEffect(() => {
    // 发起API请求
    const getApiData = async () => {
      try {
        const response = await fetch('你的业务API地址');
        const result = await response.json();
        // 此处替换为你的业务返回字段
        const targetData = result.data.targetValue;

        // 若需要将返回值展示在输入框内，更新inputVal
        setInputVal(targetData);
        // 若需要将返回值替换为占位符，更新placeholder
        setPlaceholder(targetData);
      } catch (error) {
        console.error('数据请求失败', error);
        setPlaceholder('数据加载失败');
      }
    }

    getApiData();
  }, []); // 空依赖代表组件挂载时仅执行一次

  return (
    <input
      type="text"
      readOnly
      value={inputVal}
      placeholder={placeholder}
      style={{ padding: '6px 10px', width: 280 }}
    />
  )
}

export default ReadonlyInput;

注意事项 #

• React内只读属性必须写为驼峰格式readOnly，使用原生小写readonly会导致属性不生效
• placeholder仅会在inputVal为空（空字符串/undefined）时展示，若你的需求是接口返回后直接在输入框展示值，仅需更新inputVal即可，无需修改placeholder
• 只读状态可以通过CSS自定义样式区分可编辑状态，比如设置background: #f5f5f5、border: 1px solid #eee等

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