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

Question

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

这是我的输入组件

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

return 占位符的函数。

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 = ""}
 />

Answer 1

这里 placeholder={ () => { CustomPlaceholder("facebook") }} 它调用函数但是 return 未定义，使它 return 值：placeholder={() => CustomPlaceholder("facebook")},

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

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

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

Displaying Dynamic placeholder content on Textbox in ReactJS

javascript

textbox

reactjs