TypeError:无法在React应用程序中读取null的属性“style”
TypeError:无法在React应用程序中读取null的属性“style”
提问于 2018-05-28 00:03:27
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;根据我的理解，我得到这个错误是因为输入值还没有设置，但是我不确定如何修复这个错误
回答 1
Stack Overflow用户
发布于 2018-06-07 04:17:48
我的假设是在上传图片后预览时你想隐藏上传程序，所以你可以用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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50554007
复制相关文章
相似问题
腾讯云开发者
