例:
千山鸟{key1}, 万径人{key2}
把{}替换成input输入框,并且以key1,key2为input的id
react实现方式如下:
import { useReducer, useCallback, Fragment } from "react";
const str = "千山鸟{key1}, 万径人{key2}";
const initState = {};
const reducer = (state, action) => {
const { type, sign, data } = action;
switch (type) {
case "change": {
return {
...state,
[sign]: data
};
}
default: {
return state;
}
}
};
const createInput = ({ sign, dispatch, oldValue }) => {
const changeHandle = (e) => {
const { value } = e.target;
dispatch({
type: "change",
sign,
data: value
});
};
return <input onChange={changeHandle} value={oldValue} />;
};
const MyComponent = () => {
const data = {};
const [state, dispatch] = useReducer(reducer, initState);
const r1 = str.match(/\{(.*?)\}/g).map((item) => item.replace(/\{|\}/g, ""));
const r2 = str.split(/\{.*?\}/);
if (r2[r2.length - 1] === "") {
r2.pop();
}
let index = -1;
const clickHandle = useCallback(() => {
// key-value格式
const result = str.replace(/\{(.*?)\}/g, (_, m1) => {
data[m1] = state[m1];
});
console.log("key-value格式", data);
// {key1: "飞绝", key2: "踪灭"}
// 文字格式
const result1 = str.replace(/\{(.*?)\}/g, (_, m1) => state[m1]);
console.log("文字格式", result1);
// 千山鸟飞绝, 万径人踪灭
}, [state]);
return (
<div>
{r2.map((item, index) => {
const sign = r1[index];
return (
<Fragment>
<span dangerouslySetInnerHTML={{ __html: item }}></span>
{sign && // 加这个判断是为了,最后如果不是{}的话,避免结尾多出一个input输入框
createInput({
sign,
dispatch,
oldValue: state[sign] || ""
})}
</Fragment>
);
})}
<input type="button" onClick={clickHandle} value="提交" />
</div>
);
};
export default MyComponent;