react js 把字符串中特定的{}替换成input输入框,并提交全部数据

例:
千山鸟{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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值