使用ref值输入onChange不起作用
是指在前端开发中，当我们使用ref属性来获取表单元素的值，并且尝试在onChange事件中更新该值时，发现该事件无法触发。
这个问题可能出现在以下几种情况下：
- 未正确绑定ref属性：确保在表单元素上正确地添加了ref属性，并且将其绑定到相应的变量上。例如，如果要获取一个input元素的值，可以使用
ref={(input) => this.inputRef = input}将ref绑定到一个类成员变量上。 - 未正确绑定onChange事件：确保在表单元素上正确地添加了onChange事件，并且将其绑定到相应的处理函数上。例如，可以使用
onChange={this.handleChange}将onChange事件绑定到一个名为handleChange的处理函数上。 - 未正确处理onChange事件：在处理函数中，确保正确地更新ref值或相应的状态。例如，在handleChange函数中，可以使用
this.inputRef.value来获取input元素的值，并将其存储到状态中，以便在需要时进行使用。 - 组件重新渲染导致ref值丢失：如果组件在重新渲染时，ref值丢失，可能会导致onChange事件不起作用。可以尝试在组件的构造函数中使用
this.inputRef = React.createRef()来创建ref，并在表单元素上使用ref={this.inputRef}来绑定ref。
总结起来，要解决使用ref值输入onChange不起作用的问题，需要确保正确绑定ref属性和onChange事件，并在事件处理函数中正确地更新ref值或相应的状态。如果问题仍然存在，可以检查组件的重新渲染是否导致ref值丢失，并尝试使用React的createRef()方法来创建ref。
相关·内容
1回答
因此，当我通过单击按钮选择一个文件，并再次通过单击重新选择同一文件时，onChange()事件无法识别它。我的参考值：我的上传按钮： style={{ display: "none" }} onChange={this.onFileChange}
浏览 24提问于2021-03-10得票数 0
1回答
当组件定义在另一个组件中时，我不明白为什么输入在输入一个字符之后就失去了焦点。我在其他答案中读到使用参考文献。但不起作用。不起作用：import ReactDOM from "react-dom";
function MyApp<input ref={ref} defaultValue={text} onChang
浏览 3提问于2020-07-06得票数 0
1回答
我正在尝试创建单独的输入组件并使用React表单，下面是组件：
export default function TextInput({label, id, placeholder, name, ...params
浏览 3提问于2022-07-25得票数 0
我在我的演示应用程序中使用了react引导程序。我想在输入类型文件中设置值。另外，我想在10秒后从输入类型文件字段中删除这个值(如果有值的话)。有可能吗？"); setTimeout(() => { }, 10000); const onchange<Form.Label>Default file
浏览 5提问于2022-04-11得票数 0
1回答
我正在使用由React表单库生成的useForm钩子。由于我使用的UI库，我被迫创建自定义单选按钮。Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
浏览 14提问于2022-09-22得票数 0
我有反应钩形式的输入收音机，我试着用它作为真正的布尔值，而不是字符串。
我知道RHF有valueAsNumber将其转换为数字。
浏览 15提问于2022-06-17得票数 0
回答已采纳
我一直在尝试从input字段获取输入，我使用了refs(react中的常用方法)，但它似乎不起作用。我得到的input是undefined。= () => {}
return( <Input ref<Button onClick={this.sendMessage}>Send</Button>
<&#x
浏览 18提问于2017-03-10得票数 5
回答已采纳
inputClasses} // used to display user typed words in input field // onchange is used to store value in redux store &#x
浏览 0提问于2019-06-06得票数 1
回答已采纳
1回答
如何获取更改后的值？
、、、
moment(task.dueDate).format("YYYY-MM-DD");
input type="date" className="task-due-date" value={dueDate} onChange
浏览 9提问于2017-07-06得票数 1
回答已采纳
2回答
我正在使用在React应用程序中进行验证。验证工作正常，但我的onChange处理程序没有触发： type="text" placeholder="First Name"component={Input} />
为什么会这样呢？
浏览 0提问于2019-05-03得票数 4
回答已采纳
如果我用ref设置输入然后，将在DOM中设置该值，但不会触发onChange事件。如何在使用ref时触发onchange <div&g
浏览 14提问于2020-05-13得票数 0
回答已采纳
我在一个React组件中有一个select字段，它值它是通过组件状态设置的，an有一个附加到onChange事件的函数。如果手动更改select字段值，则会触发onChange事件，但如果通过更改来自另一个函数的状态值来更改它，则不会。有办法以编程方式触发事件吗？下面是我需要实现的一个基本例子。其思想是，当handleChange1()更改state.val2的值(因此更改在第二个select字段上选择的选项)时，handleChange2()也被触发，因此合成事件被传递给父函
浏览 10提问于2017-05-09得票数 2
在下面的代码中，我无法使用this.setState({name: this.nameRef.current.value})。有没有人能告诉我为什么会这样？一旦我在ref的当前值中得到了一些东西，为什么我不能用它来更新组件的当前状态？另外，这是一种错误的做法吗？但是，如果它不起作用，那也没关系。60%', display: 'inline'}} name="name" type="text" className={"form-control&q
浏览 19提问于2019-12-19得票数 0
回答已采纳
我尝试使用onChange、onClick和ref，但它们都不能为我提供所选选项的值
<select ref={input => { this.handleInput(input.value) } }>我不知道如何获得选项值，即使将ref更改为onChange和onClick也不起作用
浏览 1提问于2017-12-10得票数 2
回答已采纳
在输入时间选择器输入时，如何获得它的值？查看和两个可用的事件，onChange和onSelect。这两种方法都不能解决我的需要。
知道吗？
浏览 5提问于2022-10-06得票数 1
回答已采纳
在中，它通过省略value和onChange属性来描述具有不受控制的字段。说要在任何不受控制的输入上使用ref，但这样做只会引用它的容器，一个TextField。在Material UI中检索非受控TextField的值的推荐方法是什么？我可以使用querySelector来查找元素，但这似乎不是一种正确的方法。
浏览 14提问于2021-03-09得票数 0
2回答
我希望实现useRef，以便输入标记所在的组件不应在值上重新呈现。如果我们使用useState，它将在按下的每个键上重新呈现整个组件。return(
<input type="text" placeholder="Name" value={name} onChangename.current = e.target.val
浏览 3提问于2022-03-21得票数 1
1回答
我使用React表单注册数据表单，如下所示： className="block w-full box-border rounded-lg mb-5 text-sm p-{...register('password', { required: true })} />
它的工作非常好，直到我在我的项目中使用埃斯林特提出，道具的传播不应该使用，因为我们可能使用</em
浏览 2提问于2022-10-10得票数 0
回答已采纳
在输入type="checkbox"上使用onChange事件时，单击和双击都不起作用 type="checkbox" ref="category" onChange={this.formValueChange}
浏览 0提问于2018-05-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
