如何用对象中提供的输入字段和值替换字符串中的占位符答案

【问题标题】：How to replace placeholder in string with input fields and values provided in object如何用对象中提供的输入字段和值替换字符串中的占位符
【发布时间】：2021-01-23 02:34:18
【问题描述】：

我有一个带有占位符的字符串。并想用输入字段替换这些占位符。

最初加载页面时，字符串将在占位符的位置显示输入字段，并在对象中提供值。一旦用户更改任何输入字段，它将使用 onChange 事件针对给定的正则表达式进行验证。

"Ensure that backup is greater than {maxCount} days old"

{
"maxCount": {"value":"202","type":"text","regex":"^[0-9]"}
}

页面上的最终输出需要将 maxCount 替换为输入字段，并且值将来自对象。字符串可能有多个占位符

以下是我尝试过的，但问题在于占位符值

let gaps = [];
    let last = '';
    let title = "Ensure that backup is greater than {maxCount} days old"
    
    const addGapsField = (row) =>{
        let text = title.split(/\{.*?\}/g)
        text.forEach((part, i) => {
          gaps.push(row.Parameters[Object.keys(row.Parameters)[0]].parameterValue)
        })
        last = text.pop()
        return text
    }

const arr = addGapsField(row)//row/Parameters contains obj to replace
<div id="app">
                    <span>
                    {
                        arr.map((part, key) =>{
                            return(
                            <>
                            {part}
                            <input key={key} className="form-control d-inline" style={{width:'45px'}} type={'text'} name={'name'} value = {gaps[key]} />
                            </>
                            )
                        })
                    }
                    </span>
                    <span>{last}</span>
                </div>

【问题讨论】：

什么？我很迷惑。您需要的结果示例是什么？如果您更新您的问题以包括您对此的尝试，这将有助于其他人理解您的问题。

标签： javascript html jquery reactjs react-native

【解决方案1】：

我认为你混淆了输入标签上的道具。

这是一个占位符：

这是输入中的填充值：

所以你的对象应该填充占位符道具，而不是值。您的“价值”道具将在 onChange 回调中更改。

 <input {...yourOtherProps} placeholder = {gaps[key]} />

【讨论】：