如何在文本字段中将对象作为输入传递。并得到它的对象

Posted 2023-02-22

【中文标题】如何在文本字段中将对象作为输入传递。并得到它的对象

【英文标题】：How to pass the object as a input in text field. and get it object

【发布时间】：2021-11-05 04:45:56

【问题描述】：

这是我的初始状态。我想添加 1 个 json 作为输入，并且想将键和值推送到初始状态？

const[state,setState] = useState(
 id: "1440"
 dev: "admin"
 cmd: 5
 agu: 
)

我有一个 JSON 数据。我需要将其作为文本字段中的输入传递并像 JSON 对象一样将其取回。 现在我将类型作为字符串

示例 JSON

  
  key1:"val1",
  key2:"val2",
  key3:"val3",
  key4:"val4",
  key5:"val5",
  key6:"val6",
  key7:"val7
  

我希望输出像这样

const[state,setState] = useState(
     id: "1440"
     dev: "admin"
     cmd: 5
     agu: 
         key1: "val1"
         key2: "val2"
         key3: "val3"
         key4: "val4"
         key5: "val5"
         key6: "val6"
         key7: "val7
     
    )

我怎样才能做到这一点。大家有什么想法可以分享给我

【参考方案1】：

您可以将来自事件目标的newValue 和agu 对象的key 传递给附加到每个输入的回调，以便计算新状态。

import "./styles.css";
import  useState  from "react";

export default function App() 
  const [state, setState] = useState(
    id: "1440",
    dev: "admin",
    cmd: 5,
    agu: 
      key1: "val1",
      key2: "val2",
      key3: "val3",
      key4: "val4",
      key5: "val5",
      key6: "val6",
      key7: "val7"
    
  );

  const handleChange = (key, newVal) => 
    const newState = 
      ...state,
      agu: 
        ...state.agu,
        [key]: newVal
      
    ;
    console.log(newState);
    setState(newState);
  ;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      Object.keys(state.agu).map((key) => 
        return (
          <label>
            key
            ":  "
            <input
              value=state.agu[key]
              onChange=(e) => handleChange(key, e.target.value)
            />
          </label>
        );
      )
    </div>
  );

---

在单个 <textarea> 中编辑整个 agu 对象。

在您的更改处理程序中，您需要将 textarea 输入的状态保存为字符串并检查它是否是有效的 JSON。如果有效，请设置您的状态。如果不是，则显示错误。

import "./styles.css";
import  useState  from "react";

export default function App() 
  const [agu, setAgu] = useState("");
  const [error, setError] = useState(null);
  const [state, setState] = useState(
    id: "1440",
    dev: "admin",
    cmd: 5,
    agu: 
  );

  const handleChange = (e) => 
    const  value  = e.target;
    setAgu(value);

    let newAguObj;
    try 
      newAguObj = JSON.parse(agu);
      console.log(newAguObj);
      setState(
        ...state,
        agu: newAguObj
      );
      setError(null);
     catch (error) 
      setError(error.message);
    
  ;

  return (
    <form>
      <label>
        agu :
        <textarea onChange=handleChange name="agu" value=agu></textarea>
      </label>
      !!error && <p>error</p>
      <hr />
      <pre>
        state:
        <br /> JSON.stringify(state, null, 2)
      </pre>
    </form>
  );

【讨论】：

在单个文本区域中，我需要将 JSON key1: "val1", key2: "val2", key3: "val3", key4: "val4", key5: "val5", key6 : "val6", key7: "val7 . 并且需要像 const[state,setState] = useState( id: "1440" dev: "admin" cmd: 5 agu: key1: "val1" key2: "val2" key3: "val3" key4: "val4" key5: "val5" key6: "val6" key7: "val7 )

好的。我也添加了这个

arg 的初始状态为空。但你定义了。初始状态 arg 为空。我们需要将该 aru 添加为来自文本区域的 json。一旦我们在文本区域中添加 json，状态将像您定义的初始一样更新

【参考方案2】：

您可以使用 setState、展开运算符、当前状态和您的数据。

setState(
  ...state,
  agu: 
    key1: "val1",
    key2: "val2",
    key3: "val3",
    key4: "val4",
    key5: "val5",
    key6: "val6",
    key7: "val7
  
);

【讨论】：

key1:"val1", key2:"val2", key3:"val3", key4:"val4", key5:"val5", key6:"val6", key7:"val7 上面这个json，我需要从文本区域作为输入字段传递。所以它被认为是字符串。那么我们如何使用spread来实现呢？

你可以使用agu: JSON.Parse(...)

【参考方案3】：

const inputdata = 'val1, val2, val3, val4'
const strToArr = inputdata.split(' ').join('').split(',')
const arrToObj = 

for(id in strToArr) 
arrToObj[`key$id`] = strToArr[id]


//  key0: 'val1', key1: 'val2', key2: 'val3', key3: 'val4' 

【讨论】：

输入数据如下 key1:"val1", key2:"val2", key3:"val3", key4:"val4", key5:"val5", key6:"val6", key7:"val7"

您是否尝试将 +1 添加到 id ？

键和值都是动态的。用户可以添加任何键和任何值

在这种情况下只需使用 JSON.stringify(data) 和 JSON.parse(data)