在 ReactJS 中的文本框上显示动态占位符内容答案

【问题标题】：Displaying Dynamic placeholder content on Textbox in ReactJS在 ReactJS 中的文本框上显示动态占位符内容
【发布时间】：2021-01-25 18:55:47
【问题描述】：

我想在 React 中的文本框组件内的占位符中放置一个动态内容。我已经声明了一个返回占位符的函数，将值作为参数传递。为了清晰起见，我在下面的代码中对 args 进行了硬编码。我的函数中总是有一个空参数。如果有人可以让我知道我在这里做错了什么。

这是我的输入组件

<SocialInput 
   value={data.name}
   onChange={onChangeInput}
   error={validationError}
   placeholder={ () => { CustomPlaceholder("facebook") }}  
/>

返回占位符的函数。

const CustomPlaceholder = (name) => {
        let placeholderContent;
        switch(name) {
            case "facebook": 
                placeholderContent = "https://www.facebook.com/your-username";
                return placeholderContent;
            case "email":
                placeholderContent = "example@domain.com";
                return placeholderContent;
            case "instagram":
                placeholderContent = "https://www.instagram.com/your-username"
                return placeholderContent;
            case "linkedin":
                placeholderContent = "https://www.linkedin.com/your-username";
                return placeholderContent;
            case "pinterest":
                placeholderContent = "https://www.pinterest.com/your-username";
                return placeholderContent;
            case "skype":
                placeholderContent = "https://skype/your-username";
                return placeholderContent;
            case "twitter":
                placeholderContent = "https://twitter.com/your-username";
                return placeholderContent;
            case "whatsapp":
                placeholderContent = "(Country-code)-Mobile number";
                return placeholderContent;
            case "youtube":
                placeholderContent = "https://www.youtube.com/channel/Channel link";
                return placeholderContent;
            case "blog":
                placeholderContent = "domain.com";
                return placeholderContent;
            case "other":
                placeholderContent = "Social URL";
                return placeholderContent;
                default: "Social URL";
        }
    }

最后是我的输入文本框。在这里，我得到了作为占位符道具的功能：

<input 
   type="text"
   onChange={onChange}
   value={value}
   className="social-input"
   placeholder={placeholder}
   onBlur={(e) => e.target.placeholder = placeholder}
   onFocus={(e) => e.target.placeholder = ""}
 />

【问题讨论】：

标签： javascript reactjs textbox

【解决方案1】：

这里placeholder={ () => { CustomPlaceholder("facebook") }}调用函数返回undefined，让它返回值：placeholder={() => CustomPlaceholder("facebook")}，

并在您的组件中调用接收到的函数：placeholder={placeholder()}，因为它是一个函数

或者你可以让你的组件保持原样并传递生成的占位符字符串： placeholder={CustomPlaceholder("facebook")}

【讨论】：