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

时间:2017-01-24 15:46:27

标签: javascript reactjs onblur

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

我怎样才能让它发挥作用?我能理解为什么它不会让我改变字段,但我能做些什么来使它工作?

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

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

3 个答案:

答案 0 :(得分:24)

为了使输入值可编辑,您需要有一个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)} />

答案 1 :(得分:9)

这样做的方法:

  1. 不要将value属性分配给input field,只要onblur方法触发,就会点击这样的api:

    <input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
    
  2. 更新服务器的值:

    updateInput(value){
        /*update the value to server*/
    }
    
    1. 如果您要按valueinput属性分配到this.props.inputValue字段,请使用onChange方法,将值传递回父组件,更改inputValue在父级中使用setState,它将按以下方式运行:

      <input value={this.props.inputValue} onChange={(e)=>this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />
      
    2. 在父组件中:

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

      更新服务器的值:

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

答案 2 :(得分:5)

您需要绑定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)} 
/>