我有以下输入字段，如下所示。在模糊时，该函数调用一个服务来更新服务器的输入值，一旦完成，它就会更新输入字段。
我怎样才能让它工作？我可以理解为什么它不让我更改字段，但是我该怎么做才能使其正常工作？
我无法使用，defaultValue因为我会将这些字段更改为其他字段
<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />
使用 onBlur 事件上的值更新 React Input 文本字段
IT技术
javascript
reactjs
onblur
2021-05-04 13:12:59
3个回答
为了使输入值可编辑，您需要有一个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)} />
这样做的方法：
不要将
value属性分配给input field，每当onblur方法被触发时，像这样点击 api：<input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
更新服务器的值：
updateInput(value){
/*update the value to server*/
}
如果您将
value属性分配给inputfield bythis.props.inputValue，然后使用onChange方法，将值传递回父组件，inputValue通过setState在父组件中使用更改，它将像这样工作：<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*/
}
您需要绑定一个 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)}
/>