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

问题描述

我有带占位符的字符串。并希望用输入字段替换这些占位符。

最初，当页面加载时，字符串将在占位符的位置显示输入字段，并在对象中提供值。一旦用户更改任何输入字段，它将使用 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>

标签： javascripthtmljqueryreactjsreact-native

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

这是一个占位符：

这是输入中的填充值：

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

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

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

问题描述

解决方案

推荐阅读