CODEWITHSUNDEEP
javascripthtmlreactjsjsx
mathlearner
mathlearner

Reputation: 7659

Not able to type in input field

Hi I write a small component

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.state = { tags: [], value: "" };
  }
  onKeyPress(e) {
    if (e.key === "Enter") {
      this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
    }
  }

  render() {
    return (
      <div>
        <div styleName="fieldset width-95">
          <label>Tags</label>
          <div>
            <div>
              {this.state.tags.map(tag => (
                <span>{tag}</span>
              ))}
            </div>
            <input
              type="text"
              onKeyPress={this.onKeyPress}
              value={this.state.value}
            />
          </div>
        </div>
      </div>
    );
  }
}

after writing 1st time when I enter.it creates a tag but after that, I can't type anything in the input field. can anyone please explain how to enable typing so that I will be able to create another tag.

Upvotes: 1

Views: 337

Answers (3)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7979

You can try below code.And you remove value which you are set on state.And use onChange method.

      import React, { Component } from 'react';

    export default class TextInput extends React.Component {
    constructor(props) {
      super(props);
      this.onKeyPress = this.onKeyPress.bind(this);
      this.state = { tags: [] };
     }
     onKeyPress(e) {
      if (e.key === "Enter") {
        this.setState({ tags: [...this.state.tags, e.target.value], value: 
        e.target.value });
        console.log("tag:",this.state.tags)
      }
    }

    handleInputChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      };

    render() {
      return (
        <div>
          <div styleName="fieldset width-95">
            <label>Tags</label>
            <div>
              <div>
                {this.state.tags.map(tag => (
                  <span >{tag}</span>
                ))}
              </div>
              <input
                type="text"
                onKeyPress={this.onKeyPress}
                name="demo"
                value={this.state.value}
                onChange={this.handleInputChange}
              />
            </div>
          </div>
        </div>
       );
     }
    }

Upvotes: 0

Alberto Perez
Alberto Perez

Reputation: 2922

The problem is that you forgot to add an onClick event for the input, this will handle when you type something in it (You only need to update the state every time the onChange event is fire), like this (I've also made an update to a more ES6 syntax):

import React, { Component } from 'react';

export default class TextInput extends Component {
  state = { tags: [], value: "" };

  onKeyPress = e => {
    if (e.key === "Enter") {
      this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
    }
  };

  onClick = e => {
    if (e && e.target && e.target.value) {
      this.setState({ value: e.target.value });
    }
  };

  render() {
    const { tags, value } = this.state;

    return (
      <div>
        <div styleName="fieldset width-95">
          <label>Tags</label>
          <div>
            <div>
              {tags.map(tag => (
                <span>{tag}</span>
              ))}
            </div>
            <input
              type="text"
              onChange={this.onClick}
              onKeyPress={this.onKeyPress}
              value={value}
            />
          </div>
        </div>
      </div>
    );
  }
}

Upvotes: 0

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15708

You also need an onChange handler as well to update state on user-input. Otherwise this.state.value will never update.

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.state = { tags: [], value: "" };
  }
  onKeyPress(e) {
    if (e.key === "Enter") {
      this.setState({ tags: [...this.state.tags, e.target.value], value: "" });
    }
  }

  handleOnChange = e => {
    this.setState({
      value: e.target.value
    });
  };

  render() {
    return (
      <div>
        <div styleName="fieldset width-95">
          <label>Tags</label>
          <div>
            <div>
              {this.state.tags.map(tag => (
                <span>{tag}</span>
              ))}
            </div>
            <input
              type="text"
              onChange={this.handleOnChange}
              onKeyPress={this.onKeyPress}
              value={this.state.value}
            />
          </div>
        </div>
      </div>
    );
  }
}

See working sandbox: https://codesandbox.io/s/serene-https-t02h2

Upvotes: 4

Related Questions