使用 onBlur 事件上的值更新 React Input 文本字段 [英] Updating a React Input text field with the value on onBlur event

问题描述

我有以下输入字段.在模糊时，该函数调用一个服务来更新服务器的输入值，一旦完成，它就会更新输入字段.

I have the following input field as below. On blur, the function calls a service to update the input value to the server, and once that's complete, it updates the input field.

我怎样才能让它工作?我可以理解为什么它不让我更改字段，但是我该怎么做才能使其正常工作?

How can I make it work? I can understand why it's not letting me change the fields but what can I do to make it work?

我不能使用 defaultValue 因为我会将这些字段更改为其他字段

I can't use the defaultValue because I will be changing these fields to some other ones

推荐答案

为了使输入值可编辑，您需要有一个 onChange 处理程序来更新值.因为你想调用一个函数 onBlur，你必须像 onBlur={() => 那样绑定它.this.props.actions.updateInput()}

In order to have the input value editable you need to have an onChange handler for it that updates the value. and since you want to call a function onBlur, you have to bind that like onBlur={() => this.props.actions.updateInput()}

componentDidMount() {
   this.setState({inputValue: this.props.inputValue});
}
handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

<input value={this.state.inputValue} onChange={this.handlechange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} />

这篇关于使用 onBlur 事件上的值更新 React Input 文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！