36

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 defaultValue because I will be changing these fields to some other ones

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

5 Answers 5

50

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)} />
4
  • 3
    What if you want to use onBlur that dispatches the updated value to the state - without having to use onChange to re-render the component on every keystroke?
    – Delice
    Commented May 2, 2021 at 21:40
  • @Delice you can do that but will have to make the input element uncontrolled by not setting its value from state Commented May 3, 2021 at 4:40
  • Is there way to achieve the controlled component but with the functionality like onBlur in order to prevent unnecessary re-render of other child components?
    – Delice
    Commented May 3, 2021 at 7:17
  • Sorry, but this answer may introduce race conditions because setState is not synchronous..
    – Tasos
    Commented May 5, 2022 at 10:10
14

Ways of doing this:

  1. Do not assign value property to input field, whenever onblur method gets trigger, hit the api like this:

    <input placeholder='abc' onBlur={(e)=>this.props.actions.updateInput(e.target.value)} />
    

Update value to server:

updateInput(value){
    /*update the value to server*/
}
  1. If you are assigning the value property to input field by this.props.inputValue, then use onChange method, pass the value back to parent component, change the inputValue by using setState in parent, it will work like this:

    <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*/
}
5

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:

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)} 
/>
1
  • 4
    firstly setting props to initial state is an antipattern, and if you make use of arrow function you no funcger need bind in the constructor Commented Jan 24, 2017 at 16:18
0

There is a difference between the HTML element change event and the react change event.

The HTML change event is triggered when there is a change and the element loses focus.

React change event is triggered on every keyboard key press.

If you want the HTML's change behavior, one way to do that is by using a ref and adding a change event listener. Here is an example:

function Example(props) {
  const domElement = useRef();

  useEffect(() => {
    function onElementChange() {
      // your logic goes here
    }

    if (domElement && domElement.current) {
      domElement.current.addEventListener("change", onElementChange);
      return function cleanup() {
        domElement.current.removeEventListener("change", onElementChange);
      };
    }
  }, []);

  return <input ref={domElement} />;
}
0

in my case an example with react hooks

I have a global state which handles all the fields and I made a local state for each form section, or each form entry, so "onChange" I update the local state and onBlur I update the global state.

also there is a useEffect that onload if the global state has defult values or receive values from a database it will update the localState

const SectionComponent = ({glabalState, setGlobalState}) => {

  const thisComponentState = glabalState['thichComponent']
        
  const [localText, setLocalText] = useState(thisComponentState)

  useEffect(() => {
    setLocalText(thisComponentState)
  }, [thisComponentState])
        

  return (
    <input 
      value={localText}
      onChange={(e) => setLocalText(e.target.value)}
      onBlur={() => updateglobalState(thisFromKey, localtext)} 
    />
  )

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.