setState不处理来自onClick侦听器的文件输入
在React中，setState是一个用于更新组件状态的方法。它接受一个对象作为参数，该对象包含要更新的状态属性和对应的新值。通常情况下，我们会在组件的生命周期方法或事件处理函数中调用setState来更新状态。
对于你提到的问题，如果setState不处理来自onClick侦听器的文件输入，意味着在点击事件处理函数中没有调用setState来更新状态。这可能会导致组件状态不会随着文件输入的变化而更新，从而无法实现预期的效果。
解决这个问题的方法是在onClick事件处理函数中调用setState，并将文件输入的值作为参数传递给setState。这样，当用户选择文件时，可以通过setState更新组件的状态，从而触发重新渲染，并在界面上显示文件输入的值。
以下是一个示例代码：
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
fileInputValue: ''
};
}
handleFileInputChange = (event) => {
const fileInputValue = event.target.value;
this.setState({ fileInputValue });
}
handleClick = () => {
// 处理点击事件
// 可以使用this.state.fileInputValue来获取文件输入的值
// 其他逻辑处理...
}
render() {
return (
<div>
<input type="file" onChange={this.handleFileInputChange} />
<button onClick={this.handleClick}>点击</button>
</div>
);
}
}
export default MyComponent;在上面的示例中，handleFileInputChange方法是一个文件输入的onChange事件处理函数，它会在文件输入的值发生变化时被调用，并通过调用setState来更新组件的状态。handleClick方法是点击事件处理函数，可以使用this.state.fileInputValue来获取文件输入的值，并进行相应的处理。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供具体的链接。但你可以通过搜索腾讯云的官方文档或网站，查找与文件上传相关的产品和服务，以获取更多关于腾讯云的信息。
相关·内容
我对setState()接受的object.The代码链接感到困惑，这里是，代码如下：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
intervalCount: 1,
buttonCount: 1
};
this.increment = 1;
this.intervalId = null;
}
tick() {
this.setState({
intervalCou
浏览 7提问于2017-12-02得票数 1
回答已采纳
我有一个简单的React JS应用程序，我想在其中添加一个搜索功能。我已经创建了搜索函数代码并添加了搜索组件(来自Semantic-UI)，该组件将搜索到的值传递给函数。
如何让它从下面的搜索组件调用函数来触发表单提交？
这是搜索组件。
<Search
onSearchChange={(e) => this.handleSearchChangeNew(e.target.value)}
/>
下面是搜索函数：
async handleSearchChangeNew (value) {
console.log("value in
浏览 0提问于2021-02-02得票数 0
2回答
我目前正在编写一个2048游戏，它检测用户的键盘输入，然后更改相应方向的状态；但我未能更改状态。我使用它作为一个引用来捕获输入命令。然后，设置一个名为keyValue的字符串，以存储键盘输入的字符串值，并在keyValue中更新keyValue。但我没能在我的setState中通过keyValue的componentDidMount。我的代码如下。我之前也尝试过在我的setState中使用addEventListner，但它也失败了。有人能帮忙吗？谢谢。
constructor(props) {
super(props);
this.state = {
浏览 0提问于2020-11-21得票数 0
回答已采纳
1回答
我们有以下反应html。在回调函数filterList()中，我们有一个参数'input‘filterList(输入)。这个物体是从哪里来的？这是来自onClick事件吗？还有什么其他可用的对象？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Filtered List</title>
<script src="react/react.js"></script>
<scri
浏览 2提问于2019-12-02得票数 1
回答已采纳
你们这些编码专家能帮我解决这个问题吗..
代码如下所示。
我正在尝试实现一个简单的搜索页面。您将被重定向到此页面，其中包含您在上一页中输入的搜索条件的答案。在此当前页面中，您还可以通过输入新的搜索条件来修改获得的答案，然后单击搜索以获得新的答案，替换旧的答案。理想情况下，当输入新的搜索条件时，它应该替换页面的url中的旧查询字符串，然后页面将刷新，然后使用新的查询字符串来获得新的答案，该答案将显示在刷新的页面中。所以这是我写的。
import React from 'react';
import { Link } from 'react-router-dom';
浏览 0提问于2020-07-22得票数 0
2回答
这有可能从外部调用react组件吗？例如
<div id='react-app'></div>
<button onClick=callReactModal()>PressME</button>
我的组件，我想要调用方法
let callReactModal = function () {
console.log('clicked');
//Navigation.sayHello();
}
class Navigation extends React.Component<any, any>
浏览 2提问于2017-02-16得票数 2
回答已采纳
我有一个search.js文件和一个搜索-date.js文件。在search.js文件中，我呈现一个SearchDate容器。我不明白的是，当MenuItem组件被单击时，它的行为。
如您所见，函数onDayChange是从Search传递给SearchDate的。然后将此函数传递给MenuItem属性上的onClick。onDayChange in Search需要一个date参数。
现在，我做了输出的alert调用：object。这个对象是从哪里来的？，我在代码中看不到它是由我发送的。我也不知道去哪找资料-UI文档。
search.js：
import SearchDate from &#
浏览 0提问于2018-04-28得票数 1
回答已采纳
2回答
更改音频元素的src属性不起作用：
var Audio = React.createClass({
render : function() {
return (
<audio src={this.props.data.songUrl}/>
);
}
});
var Music = React.createClass({
render : function() {
return (
<article className="music"&
浏览 0提问于2015-07-15得票数 0
1回答
我刚刚开始探索polymer.js。我想从纸输入元素中得到名字。不起作用警报是空的。
<dom-module id="hello-world">
<template>
<h1> Hello [[name]]</h1>
<paper-input value="{{name}}"></paper-input>
<button onClick="{{getData}}">Get data</button>
</template&
浏览 1提问于2018-04-13得票数 3
回答已采纳
我正在尝试创建一个有两个输入和一个按钮的表单。单击该按钮时，输入字段将用于更新状态，然后使用保存在状态中的信息显示警报。目前，我的输入改变了状态，但每次向输入中添加一个字母时，它都会调用警报函数.
handleSubmit= (e) =>{
alert(JSON.stringify(this.state, null, ' '));
}
render() {
return (
<div className="App">
<label>
Use
浏览 0提问于2019-03-10得票数 4
回答已采纳
2回答
handleLogin() {
const { username, password } = this.state;
if (username === 'test' && password === '1234') {
this.setState({ error: false });
auth.authenticate();
alert('done')
return <Redirect to="/"/>
} else {
this.setState({
浏览 2提问于2018-07-19得票数 3
回答已采纳
点击输入有什么不同？
document.getElementById("myBtn").addEventListener("click", displayDate);
和onclick in
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
它们都被认为是事件吗？为什么
浏览 0提问于2016-05-01得票数 8
回答已采纳
我想在调用socket.on时添加一个类。以便小部件在特定socket.id上自动打开。
目的是添加socket.on('startChat'，Chat.js (){ })；，以便开始运行startChat文件。
socket.on('startChat', function() {
});
我的代码：
Website.js
constructor(props) {
super(props);
this.state = {
showComponent: false,
};
socket.on('startChat'
浏览 0提问于2018-04-26得票数 1
在React中，把onClick看作是设置eventListener而不是标准的JavaScript onclick属性更好吗？
例如，考虑这两个代码片段，第一个在标准JavaScript中，第二个在React中：
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
在最上面的示例中，onclick与对activateLasers函
浏览 0提问于2021-02-10得票数 3
回答已采纳
我正在编写以下代码：
const [userNick, setUserNick] = useState("");
const [eventListenerActive, setEventListenerActive] = useState(false);
const promptOnLeaving = (ev) => {
ev.returnValue = true;
}
useEffect(() => {
if(userNick !== "" && !eventListenerActive)
浏览 2提问于2022-03-03得票数 0
我是Reactjs的新手，我正在做一个增加和减少数量的函数。我的代码如下：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
quantity: 1,
show: true,
max:5,
min:0
};
}
IncrementItem = () => {
if(this.state.quantity > 9) {
}else {
this.
浏览 0提问于2018-10-10得票数 1
回答已采纳
我有一个React组件，它显示一个模式。第一次显示正常。但当我关闭并重新打开它时，它“保存”了输入值: render方法的代码是：
render() {
return (
<>
<Button
type="primary"
onClick={() => {
this.setState({
topup: 0,
modalVisible: true
});
浏览 4提问于2020-07-29得票数 0
我在Android2.1上，我有一个多列的自定义列表视图，使用BaseAdapter在列表视图的末尾有一个可编辑的编辑文本。如果列表视图中的数据不包含用户选择的数据，那么用户应该能够输入数据。如果数据已经在列表中，用户将能够使用自定义选择器选择数据。如果在列表视图中进行了选择，并且用户希望在选择后在底部的文本字段中输入数据，则应取消选择列表视图中的标记。我尝试使用click listener在编辑文本时使用onclick()方法。第一次单击时，编辑文本将获得焦点，并且onclick()方法不会触发。第二次单击时，将触发onclick()方法并调用notifyDataSetChanged()方法
浏览 2提问于2010-11-03得票数 1
当使用"onInput“作为侦听事件时，简单的受控输入并不是根据用户输入更新值(IE9/10中的)。"onChange“工作正常，但是为了解决IE11中的粘贴值问题，选择了"onInput”作为我们的事件。
class TestComp extends React.Component {
constructor(props){
super(props);
this.state = { value: "" };
this.updateValue = this.updateValue.bind(this);
}
rend
浏览 0提问于2017-05-23得票数 1
回答已采纳
我有filterNames()下面的代码
filterNames() {
const { peoples } = this.state;
this.setState({
filtered: peoples.filter(item => item.name.includes(this.state.input)),
currentPage:0
});
console.log(this.state.filtered)
}
当我点击这个按钮的时候
按钮：
<button className='search' onCl
浏览 1提问于2018-04-10得票数 2
回答已采纳
我想要发生的是，每当我点击一个链接时，都会显示相应的div。在加载时，不应显示任何下拉列表。单击时，应显示相应的div，并且任何打开的div都应关闭。
因此，当我单击Dropdown1时，应该会显示dropdown1的div，并从其他下拉列表中关闭所有打开的div。
constructor() {
super();
this.state = {
showMenu: false,
};
this.showMenu = this.showMenu.bind(this);
this.closeMenu = this.closeMenu.bi
浏览 2提问于2019-10-29得票数 0
让我们设想一个简单的组件运行，用户单击一个显示弹出式(setState(P))的按钮，并导致HTTP (setState(H))和WebSocket (setState(W))服务器使用弹出窗口中显示的其他数据进行响应。注意，onClick、onHTTPResponse和onWSResponse是传递给调用setState的组件的简单道具事件处理程序。
onClick: --setState(P)-->
onHTTPResponse: ---setState(H)-->
onWSResponse: ----setState(W)-->
现在，让我们想象
浏览 1提问于2020-04-13得票数 2
我有一个Todo组件，我正在尝试将onSubmitHandle()作为回调函数传递给子组件，而子组件又是一个对话框。该对话框有4个输入字段，要求所有4个输入字段的值都应传递给其父组件并在父组件中更新。(4 input fields.My requirement )有人能帮上忙吗？
我的Todo组件：
onSubmitHandle(event) {
event.preventDefault();
this.setState({students: [...this.state.students, {id:event.target.id.value,name: event.
浏览 0提问于2020-02-07得票数 0
我是第一次接触react-native。我有3个TextInput t1, t2, t3。当达到限制时，我已经完成了对下一个输入字段的关注。现在我遇到了一种情况，不知何故，我的文本输入字段t1和t1已经达到了它的最大限制。但是当我按下另一个输入时，它不会聚焦到下一个输入域t2。
<TextInput
onChangeText={text => this.setState({ v1: text })}
keyboardType='number-pad'
maxLength={1}
autoCompleteType={'off'}
autoFocus={
浏览 3提问于2019-12-17得票数 1
如果在调用setState之后添加事件侦听器，则只有再次触发该事件时，该事件侦听器才会被调用。但是，从下面的示例中，当我单击div时，会在状态更改后调用事件侦听器。
如果删除addEventListener或在toggleOpen中调用evt.stopPropagation()，则不会发生这种情况，但我想知道为什么要调用事件侦听器，如果在更改状态后设置事件侦听器。
setState是否异步更改状态，意味着回调将在事件传播后调用？
import React from 'react';
import classNames from 'classnames';
im
浏览 5提问于2017-10-11得票数 1
回答已采纳
在选项卡视图中有一个文本输入，在该视图中，我使用setState更新输入的值。
export function Login(){
const [email, setEmail] = useState();
return(
<View>
<TextInput
onChangeText={setEmail}
value={email}
/>
</View>
)
}
现在，每当我在setEmail上调用onChangeText输入时，都会隐藏起来。有什么可以阻止键盘靠近的东西吗？
浏览 2提问于2021-12-14得票数 0
在reactJS中让onClick工作时遇到了问题。我把放在一起，肯定是些微不足道的东西。代码如下，请参见文件，了解(非)工作示例：
var Bar=React.createClass({
render: function() {
return (
<div className="bar" style={{width: this.props.width+"px"}}> {this.props.width}</div>)
}
})
var ClickableBar=React.cr
浏览 1提问于2016-03-12得票数 0
注：，我重组了我的问题，以使它更容易理解。然而，为了历史的目的，我保留了旧的版本。
我有一个function应用程序，当我从箭头函数调用this.setState()时，我得到了“组件没有挂载的消息”。这是我的组成部分：
import React, { Component } from 'react'
class Test extends Component {
state = {
value: ''
}
onChange = (e) => {
e.preventDefault()
浏览 4提问于2017-06-19得票数 3
这里我有图像图标，与它的编辑图标。当我点击编辑图标时，图像输入类型的文件就会被触发，并选择相同的文件！
但我认为在这里得到event.target.file ..。
<span className='fa fa-edit edit-icon'
onClick={(e)=>{this.onChangeFile.click(e)}}> </span>
<input type="file" id="file"
ref={(ref) => this.onChangeFile = ref}
浏览 0提问于2019-03-11得票数 0
2回答
我正在开发一个应用程序，每当我按下按钮就会发出声音，应用程序看起来就像木琴，问题在于播放声音的功能。
这是我的应用程序的主要部分：
doo = (Button) findViewById(R.id.doo);
re = (Button) findViewById(R.id.re);
mi = (Button) findViewById(R.id.mi);
fa = (Button) findViewById(R.id.fa);
sol = (Button) findViewById(R.id.sol);
la = (Button) findViewById(R
浏览 2提问于2014-05-27得票数 0
回答已采纳
3回答
我是React.js的新手。我在下面的代码中，变量modalOpen值没有变化。
constructor(props) {
super(props);
this.state = {
modalOpen: false,
};
this.view = this.view.bind(this);
}
view() {
this.setState({ modalOpen: true });
alert(this.state.modalOpen)
}
render() {
return (
<button c
浏览 1提问于2018-04-26得票数 1
回答已采纳
我想做的是：
一次单击一个按钮，立即输入两个日期(开始日期和结束日期)。
默认情况下，它们的值应该是今天日期的值(如果一个输入未被更改(和一个被选中)，然后单击按钮，值应该分别是用户选择的和默认的今天的日期。
输出应该是yyyy/mm/dd
应对这一问题最应采取的反应方式是什么？
我的方法：
import React, { Component } from 'react';
import '../App.css';
class DateSelector extends Component {
constructor(props){
浏览 1提问于2017-09-14得票数 0
回答已采纳
2回答
我对ref和条件呈现有问题。当我点击一个按钮标签时，我想聚焦一个输入标签。基本上，我有这个简化的代码。
class App extends React.Component {
textInput
constructor(props) {
super(props)
this.state = {isEditing: false}
this.textInput = React.createRef()
}
onClick = () => {
this.setState({isEditing: !this.state.isEditing
浏览 1提问于2018-06-23得票数 11
回答已采纳
这是新手的反应。我有一个contenteditable div，它将dangerouslySetInnerHTML作为子级，因为我需要在运行时格式化用户输入的任何内容。在特定的span上，单击HTML内部，我想要setState包含组件的一个变量。
这能办到吗？
如果没有，我应该如何改变我的结构？
下面是代码：
updateText:function(){
var txt = $('#text_Box').text();
if(txt.indexOf('@Name') > -1)
{
txt = txt.repl
浏览 3提问于2015-05-29得票数 6
回答已采纳
3回答
下面是一个简单的代码示例，用于切换按钮
import React, { useState } from "react";
import "./styles.css";
const initialState = {
isOpen: true
};
export default function App() {
const [state, _setState] = useState(initialState);
const setState = newState =>
_setState(prevState => ({ ...pr
浏览 4提问于2020-06-12得票数 1
回答已采纳
任务是在标记之间切换时从api获取数据。
当单击链接时，它调用api服务，但是feed的状态没有更新，但它在警告下面抛出。
jQuery.Deferred异常:无法读取未定义TypeError的属性“setState”：无法读取未定义的属性“setState”
我的github回购
应用程序组件
import React from 'react';
import {FetchData} from "../service/flickerApi.service";
import Header from "./header/header.component&
浏览 3提问于2018-02-02得票数 0
2回答
所以我有这个例子来展示我现在正在处理的一些代码遇到的问题(由于各种原因，我无法发布确切的代码)。
var Test1 = React.createClass({
getInitialState: function() {
return {
events: ['Demo loaded'],
buttonClicked: false
};
},
componentWillMount: function() {
document.addEventListener('click', this.onDocum
浏览 0提问于2015-07-11得票数 3
1回答
我正在创建一个按钮的新输入字段onClick。输入的默认状态是只读。但是，我在它旁边有一个编辑按钮，使该字段不是只读的。当我单击该按钮时，该字段将被删除。请给我建议。 这就是我拥有的。 import React, { useReducer } from "react";
import "./styles.css";
import { get, uniqueId, cloneDeep, map } from "lodash";
const initialState = {
fields: []
};
expor
浏览 10提问于2021-01-28得票数 1
我不明白为什么addEventListener只在循环之外工作。使用以下代码，我在JsFiddle ()中创建了示例：
window.addEventListener('load', function (){
document.getElementById('myId').addEventListener(
'click', myHandler, false
);
var myClass = document.getElementsByClassName('myClass');
fo
浏览 1提问于2014-02-04得票数 0
回答已采纳
1回答
ngx-引导弹出关闭外部单击
、、、、
我正在尝试创建一个角4自定义窗体控件作为我的日期选择器。我使用的是ngx-引导程序，到目前为止，我已经使用来自ngx-引导程序的输入、数据交换和弹出组件设置了这个自定义表单控件。自定义控件打开一个具有集中的数据报警器的弹出，但是，我需要能够通过与popover内容交互来更改日期，并且当iam没有与popover或输入交互时，它应该会关闭。我试着跟踪上的黑客攻击。不过，这不适合我的案子。任何帮助都将不胜感激。
date-picker.component.html
<input type="text" [value]="getDate() | date:'fu
浏览 4提问于2017-06-22得票数 2
回答已采纳
我试着自学如何编写代码，并创建了一个小的待办事项应用程序。在每个todo输入的渲染中，我有一个元素，然后单击一个复选框以将其删除。我尝试创建一个单独的输入，以给出创建每个项目所需的时间。当我尝试将其链接到我的呈现方法时，没有任何呈现，并且我没有任何错误消息。
import React from 'react';
class InputBar extends React.Component {
state={ todo: '',
time: null
}
onInputSubmit = e =>{
e.
浏览 0提问于2019-02-15得票数 0
2回答
我有一个基本的输入元素，并希望它允许用户输入大写字母以及小写。但是，此输入元素仅允许用户输入小写字母。 下面是代码， search_change = (event) => {
const query = event.target.value.toLowerCase();
this.setState({
search_query: query,
});
};
<Input
icon={<Svg width="24" height="24"/>}
value
浏览 14提问于2019-02-21得票数 0
我有一个文本框，它接受用户输入的值。在文本框中输入值并按enter键时，该值将从框中消失。所以，我在textbox上实现了一个onKeyUp，这样值就被确认了。我不认为我在正确的位置使用了onKeyUp事件。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectorValues: []
};
this.handleKeyUp = this.handleKeyUp.bind(this);
}
addSel
浏览 0提问于2018-10-23得票数 0
如何在上传文件时阻止文件上传窗口的打开？
export default class Upload extends Component {
constructor(props) {
super(props);
this.state = {
filename: null,
isLoading: false
}
}
trigger_upload_input = () => {
document.getElementById("browse-fil
浏览 4提问于2017-04-09得票数 2
我试图在React中重新创建一个选项卡组件，这是有人给我的，而我在获得识别目标的onClick方法时被卡住了。
这些是我认为与问题相关的代码片段。
如果我在方法中硬编码setState，它会适当地设置它，因此onClick方法正在运行，我只是不知道如何将我单击的选项卡设置为我将状态设置为.的东西。
在我的应用页面上：
changeSelected = (event) => {
// event.preventDefault();
this.setState({
selected: event.target.value
})
console.log(event.target.value
浏览 0提问于2018-09-06得票数 1
回答已采纳
测试组件的状态为num，该组件实现了单击按钮num+1的功能，该按钮绑定到自增量方法，keyup也绑定到该方法，该方法使用setState重新呈现num的值，但是用鼠标单击按钮的效果与键盘触发器事件不一样。你能告诉我为什么吗？
当我单击该按钮时，控制台首先记录num，然后记录done。
但是当我按enter键时，console记录done，然后记录num。
React15.5
class Test extends React.PureComponent {
constructor(){
super();
this.state = {
浏览 1提问于2019-04-11得票数 4
回答已采纳
1回答
我有一个json文件，其中包含一个数组，fetch()请求中显示了一些名为json.bc的对象。我想排序所有的对象基于total字段，但数据将排序在每一页，而不是所有的pages.How，我可以排序吗？
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
library: null,
perPage: 20,
currentPage: 1,
maxPage: n
浏览 1提问于2019-05-04得票数 0
HTML文件
<!DOCTYPE html>
<html>
<head>
<title></title>]]]
<meta charset="utf-8" />
<script type="text/javascript">
function syncMe() {
debugger;
var worker = new W
浏览 4提问于2016-11-29得票数 0
我想要在点击<Burger />或者点击<Burger />之外的地方时关闭菜单。使用我当前的代码，只有在<Burger />外部的单击将被处理，但在<Burger />上的单击将不会关闭菜单。
当我在handleClickOutside函数中将domNode反转为!domNode时，在<Burger />内部单击可以正常工作，但在<Burger />外部单击将不再关闭菜单。此外，我还尝试向handleClickOutside函数添加其他条件，但同样不起作用。
我遗漏了什么？
谢谢!
export class NavB
浏览 1提问于2020-04-28得票数 0
1回答
在renderList()中，我有一个删除按钮，该按钮将在单击内容后删除该内容。我不知道该把setState放在哪里，所以我把它放在了onClick()上。这不管用。我想知道我这样做是否正确，或者是否有更好的方法来解决这个问题。
onClick函数
onClick={() => {
this.props.deleteBook(list.book_id);
this.setState({delete: list.book_id});
}}>
React.js
import React, { Component } from 'react';
imp
浏览 1提问于2017-04-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
