javascript - 类型错误 : Cannot read property 'style' of null in React App

Question

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;

这是我正在尝试运行的 Testing.js 文件中的代码片段:

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

input.style.opacity = 0;

据我了解，我收到错误是因为尚未设置输入值，但我不确定如何修复此错误

Answer 1

我的假设是在预览时上传图片后你想隐藏 uploader 所以你可以通过 react 方式实现它，为什么你要用js查询选择器。

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 元素，而不是降低不透明度

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;