Javascript TypeError:无法读取属性'；风格'；React应用程序中的空值

这是我试图运行的Testing.js文件中的代码片段：

import React, { Component } from 'react';
import logo from './logo.svg';
import JS from './Testing';
import './App.css';

class App extends Component {
render() {
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to React</h1>
    </header>
    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
        <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple />
      </div>
      <div class="preview">
        <p>No files currently selected for upload</p>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
  </div>
);
}
}

export default App;

---

据我所知，我得到了这个错误，因为输入值还没有设置，但我不确定如何修复这个错误

我的假设是在预览图像时上传图像后，你想隐藏上传器，这样你就可以通过react方式实现，为什么要使用js查询选择器呢

var input = document.querySelector('input');
var preview = document.querySelector('.preview');

input.style.opacity = 0;

另外，您应该像这样删除dom元素，而不是降低不透明度

import React, { Component } from "react";
import logo from "./logo.svg";
import JS from "./Testing";
import "./App.css";

class App extends Component {
  state = {
    uploadSuccess: false
  };
  onUploadSuccess = () => {
  // call it when you want to hide input
    this.setState({
      uploadSuccess: true
    });
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <form method="post" enctype="multipart/form-data">
          <div>
            <label for="image_uploads">
              Choose images to upload (PNG, JPG)
            </label>                
            <input
              style={{ opacity: this.state.uploadSuccess ? 0 : 1 }}
              type="file"
              id="image_uploads"
              name="image_uploads"
              accept=".jpg, .jpeg, .png"
              multiple
            />
          </div>
          <div class="preview">
            <p>No files currently selected for upload</p>
          </div>
          <div>
            <button>Submit</button>
          </div>
        </form>
      </div>
    );
  }
}

export default App;

---

您需要确保在加载DOM之前，

Testing.js

中的代码不会运行。这可以通过在

window.addEventListener（“DOMContentLoaded”，callbackFunction）中包装代码来实现或将脚本文件放在关闭
正文
标记之前。您能解释一下您在这段代码中想要实现什么吗？您正在尝试设置输入不透明度的样式吗？如果是，您可以使用css从react执行iTunes生命周期方法。在您的情况下，
componentDidMount
应该do@johnsam代码还有很多内容，但有点冗长，所以我不想全部发布，但本质上我会获取用户从输入上传的照片，然后显示这些照片
import React, { Component } from "react";
import logo from "./logo.svg";
import JS from "./Testing";
import "./App.css";

class App extends Component {
  state = {
    uploadSuccess: false
  };
  onUploadSuccess = () => {
    // call it when you want to hide input
    this.setState({
      uploadSuccess: true
    });
  };
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {this.state.uploadSuccess && (
          <form method="post" enctype="multipart/form-data">
            <div>
              <label for="image_uploads">
                Choose images to upload (PNG, JPG)
              </label>
              <input
                type="file"
                id="image_uploads"
                name="image_uploads"
                accept=".jpg, .jpeg, .png"
                multiple
              />
            </div>
            <div class="preview">
              <p>No files currently selected for upload</p>
            </div>
            <div>
              <button>Submit</button>
            </div>
          </form>
        )}
      </div>
    );
  }
}

export default App;