Javascript 使用 onBlur 事件上的值更新 React Input 文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41832389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Updating a React Input text field with the value on onBlur event
提问by Suthan Bala
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?
我怎样才能让它工作？我可以理解为什么它不让我更改字段，但是我该怎么做才能使其正常工作？
I can't use the defaultValuebecause I will be changing these fields to some other ones
我无法使用，defaultValue因为我会将这些字段更改为其他字段
<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />
<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />
回答by Shubham Khatri
In order to have the input value editable you need to have an onChangehandler 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()}
为了使输入值可编辑，您需要有一个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)} />
回答by Mayank Shukla
Ways of doing this:
这样做的方法：
Do not assign
valueproperty toinput field, wheneveronblurmethod gets trigger, hit the api like this:<input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
不要将
value属性分配给input field，每当onblur方法被触发时，像这样点击 api：<input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
Update value to server:
更新服务器的值：
updateInput(value){
/*update the value to server*/
}
If you are assigning the
valueproperty toinputfield bythis.props.inputValue, then useonChangemethod, pass the value back to parent component, change theinputValueby usingsetStatein parent, it will work like this:<input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />
如果您将
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} />
In Parent Component:
在父组件中：
onChange(value){
this.setState({inputvalue:value});
}
Update value to server:
更新服务器的值：
updateInput(value){
/*update the value to server*/
}
回答by MDiesel
You will want to bind a onChange event to update your state. Make sure to use the bind method in your constructor so that you do not lose the 'this' context within your onChange event handler method. You will then want to pass the value back to your update input method onBlur. Something like this:
您需要绑定一个 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)}
/>
