使用 REACT 从字段值中读取 JSON 元素

我正在使用Reaction从包含JSON对象的输入字段中读取值.

我能够将JSON字符串值转换为包含以下内容的常量:

{"name":"This is the name element"}

但是，当我try 从JSON中提取"name"元素的值时，我得到了一个"未定义"的响应.

当我从js文件中获得相同的JSON文本时，如下所示:

export default
    {"name":"This is the name field"}

并使用以下命令导入:

import JSONObject from './JSONObjectFile'

那么它就运行得很好.

在从HTML页面上的文本字段检索JSON对象时，我需要做什么才能实现相同的功能？

以下是完整的代码:

import './App.css';
import JSONObject from './aa_DDFFormConfigJSON'

function App() {
  var myJSON;

  function ConfigJSONReady(event) {
    myJSON = document.getElementsByName("myJSONField")[0].value;
    //This returns "undefined" instead of the actual "name" element value 
    console.log("myJSON.name using input field: " + myJSON.name); 

    // This is the same JSON object from a file, but it works fine
    myJSON = JSONObject;
    console.log("myJSON.name using file import: " + myJSON.name); 
  }

  return (
    <div>
      <header>
        Everything here is in a REACT App
        <p>Success!!</p>
      </header>

      <form>
        <textarea rows="10"
          cols="200"
          maxlength="5000"
          id='myJSONField'
          defaultValue='{"name":"This is the name field"}'>
        </textarea>
        <input
          name="DDFConfigJSONReady"
          id="DDFConfigJSONReady"
          type="checkbox"
          onChange={ConfigJSONReady}
        />

      </form>
    </div>
  );


}

export default App;