如何在 textarea（HTML 標記）中寫入 JavaScript object 以使用 documentQuerySelector 獲取 object

Question

我想在 Textarea 或輸入字段中編寫 javascript object 並想使用 documentQuerySelector 檢索這些數據。 但是當我這樣做時，它會返回一個字符串。

有沒有辦法在瀏覽器中編寫 javascript 代碼並從我的 javascript 文件（如 app.js）中訪問該代碼

HTML

<textarea />

我使用 Event 作為值 In react

JS /反應我

e.target.value

我在文本區域中寫的 object

{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
} 

但是當我檢索數據和console.log時，它給出了字符串而不是js object

"{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
}"

Answer 1

在這種情況下，textarea 的event.target.value將返回一個字符串

如果要 object，必須使用JSON.parse(textValue)來獲取

此外，傳遞給textValue的JSON.parse必須是有效的 JSON （您可以查看MDN 文檔以了解有關有效 JSON 的更多詳細信息）

例如，要獲取它，您可以聲明一個 object 並使用JSON.stringify(obj)來獲取有效的 JSON。

 const a = { quizTitle: "React Quiz Component Demo", quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim", questions: [ { question: "How can you access the state of a component from inside of a member function?", questionType: "text", questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question answerSelectionType: "single", answers: [ "this.getState()", "this.prototype.stateValue", "this.state", "this.values", ], correctAnswer: "3", messageForCorrectAnswer: "Correct answer. Good job.", messageForIncorrectAnswer: "Incorrect answer. Please try again.", explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", point: "20", }, ], }; console.log(JSON.stringify(a, null, 2));

{
  "quizTitle": "React Quiz Component Demo",
  "quizSynopsis": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  "questions": [
    {
      "question": "How can you access the state of a component from inside of a member function?",
      "questionType": "text",
      "questionPic": "https://dummyimage.com/600x400/000/fff&text=X",
      "answerSelectionType": "single",
      "answers": [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
      "correctAnswer": "3",
      "messageForCorrectAnswer": "Correct answer. Good job.",
      "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
      "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "point": "20"
    }
  ]
}

獲得有效的 JSON 字符串后，將其粘貼到 textarea 中，當您從 textarea 獲取值時，只需JSON.parse()該值即可獲取您的 ZA8CFDE6331BD59EB2AC96F8911C4B6666

export default function App() {
  const [value, setValue] = React.useState('')

  const handleClick = () => {
    try {
      console.log(JSON.parse(value))
      alert('check the console log')
    } catch(err) {
      console.error(err)
      alert('not a valid JSON')
    }
  }
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <textarea rows="30" cols="60" value={value} onChange={e => setValue(e.target.value)}/>
      <br/>
      <button onClick={handleClick}>Get JSON</button>
    </div>
  );
}