当数据存在于状态范围之外时，如何使React组件可以访问数据

Question

。。

我目前正在为学校项目使用React VR，但将Vanilla JavaScript纳入index.html中以创建静态HTML UI。在这种情况下，我正在使用HTML5表单将数据发布到我的后端，但是，我还是想使用React组件乐观地渲染数据，而不是必须从服务器中检索数据。

我的数据是在HTML元素中创建的，它需要进入React组件。

我认为裁判不会起作用，因为我所做的研究表明，它们是用于访问React组件生成的数据，就我而言，我正在寻找从HTML流出的数据对反应组件。

    ~ JAVASCRIPT & HTML ~
     //Accepts the Input
        <form id='idea-form'>
          <input type="text" id="hiddenInput" maxlength=95 autocomplete=off>                
        </form>

          // Initialize the React VR application.
        ReactVR.init(
         '../index.vr.bundle?platform=vr&dev=true',
          document.body
        );

我在此处包括我的组件，减去进出口。

组件映射一个字符串数组，将它们转换为JSX，然后将组件与数组元素作为组件的文本道具渲染。

在我的情况下，

//========== IdeaContainer Component ==========
class IdeaContainer extends Component {
  //---------- Other Methods ----------
  mapIdeasContentToJSX(ideasObjArr) {
    newIdeas = [...ideasObjArr]enter code here
    ideasJSX = newIdeas.map((idea) => {return (<IdeaText
      text={idea.content}
      y={Math.random() * 30}
      z={Math.random() * -80}
    />)})
    return ideasJSX
  }
  //---------- Lifecycle Methods ----------
  componentDidMount(){
    this.props.preLoadIdeas()
  }
  render(){
    return(
      <View>
        {this.mapIdeasContentToJSX(this.props.ideaList)}
      </View>
    )
  }
}

这是生活在索引中的代码，它存在于我的反应组件范围之外，这意味着我不能将其作为道具传递或将其设置为据我所知。

具有"容器" ID的元素是输入数据的位置，然后需要进入React组件

<div>
  <div id='logoDIV'class="relative" >
  <img id='logoIMG' src='./logo.png' draggable="false">
  </div>
</div>
<div id="container" style='position: fixed; z-index: 2; bottom: 1%; right: 22%;'>
    <div id="input"></div>
      <form id='idea-form'>
        <input type="text" id="hiddenInput" maxlength=95 autocomplete=off>
      </form>
</div>
      <canvas id="cloudCover"></canvas>
<!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
<script src="./client.bundle?platform=vr"></script>
<script src="./input.js"></script>
<script src='./clouds.js'></script>
<script>
  ReactVR.init(
    // When you're ready to deploy your app, update this line to point to
    // your compiled index.bundle.js
    '../index.vr.bundle?platform=vr&dev=true',
    document.body
  );
</script>
<script>
  let x = document.body.querySelector('body > div:nth-child(8) > div > a:nth-child(2)')
  x.style.bottom = '100px'
</script>

Answer 1

您正在寻找参考。

<input 
   type="text" 
   id="hiddenInput" 
   maxlength=95 
   autocomplete=off
   ref={(input) => { this.textInput = input; }} />

然后您可以这样访问输入值：

this.textInput.value

https://reactjs.org/docs/refs-and-the-dom.html