使用 onBlur 事件的值更新 React Input 文本字段

Question

我有如下输入字段。在 blur 上，该函数调用一个服务来更新服务器的输入值，一旦完成，它就会更新输入字段。

我怎样才能让它发挥作用？我能理解为什么它不允许我更改字段，但我该怎么做才能让它发挥作用？

我无法使用 defaultValue，因为我会将这些字段更改为其他字段

<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />

Answer 1

为了使输入值可编辑，您需要有一个 onChange 处理程序来更新该值。因为你想调用一个函数 onBlur，你必须像 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)} />

Answer 2

您需要绑定一个 onChange 事件来更新您的状态。确保在构造函数中使用 bind 方法，这样就不会在 onChange 事件处理程序方法中丢失 'this' 上下文。然后您将希望将该值传递回您的更新输入法 onBlur。像这样：

constructor(props) {
  super(props);

  this.state = {
    inputValue: props.inputValue
  };
  this.handleChange = this.handleChange.bind(this);
};

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

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

Answer 3

实现方式：

不要将value属性分配给input field，每当onblur方法被触发时，像这样点击api：
```
<input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
```

更新服务器值：

updateInput(value){
    /*update the value to server*/
}

如果您通过 this.props.inputValue 将 value 属性分配给 input 字段，则使用 onChange 方法，通过值回到父组件，通过在父组件中使用 setState 更改 inputValue，它将像这样工作：
```
<input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />
```

在父组件中：

onChange(value){
    this.setState({inputvalue:value});
}

更新服务器值：

updateInput(value){
    /*update the value to server*/
}

使用 onBlur 事件的值更新 React Input 文本字段

Updating a React Input text field with the value on onBlur event

javascript

onblur

reactjs