Question

52

Trigger onblur event on click of enter keypress in React js

rated 0 times [ 53] [ 1] / answers: 1 / hits: 22432 / 5 Years ago, mon, may 20, 2019, 12:00:00

I have an input text field . When a user inputs any text and clicks enter button I need to activate the blur event to remove the focus and also to validate the textinput .

<input type="text" 

    style={{marginTop:'20%', marginLeft:'40%'}} 

    value={value} 

    onFocus={onFocus}

    onChange={e => setValue(e.target.value)}

    onKeyPress={handleKeyPress}

/>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jimmieo

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 110

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

jimmieo questions

1 Chrome Dev Tools Elements Tab stopped working (can't right click any DOM Node and hover over Dom Node doesnt highlight anything)

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React Redux toolkit: type is not assignable to type 'CaseReducer< type, { payload: any; type: string; }>

Fri, Aug 13, 21, 00:00, 3 Years ago

1 react-query getting old data

Tue, Feb 23, 21, 00:00, 3 Years ago

1 FirebaseError: Function Query.where() requires a valid third argument, but it was undefined

Mon, Mar 11, 19, 00:00, 5 Years ago

1 How to make < tr> clickable as a link instead of cell?

Thu, Jan 31, 19, 00:00, 5 Years ago

View All

answered 5 Years ago theo · Accepted Answer

Use refs and this.inputRef.current.blur().This is working solution.

class App extends React.Component {

  constructor(props) {

    super(props);

    this.inputRef = React.createRef();

    this.state = {

      value: 

    };

  }

  keypressHandler = event => {

    if (event.key === Enter) {

      this.setState({ value: this.inputRef.current.value });

      this.inputRef.current.blur();

      this.inputRef.current.value = ;

    }

  };

  render() {

    return (

      <div>

      <label>Enter Text</label>

        <input

          type=text

          ref={this.inputRef}

          onKeyPress={event => this.keypressHandler(event)}

        />

        <p>{this.state.value}</p>

      </div>

    );

  }

}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js></script>

<div id='root' />