Get value from an input type='text' React

Asked

Viewed 4,512 times

-1

I am trying to redeem the value of an input type text.

I’m doing it this way:

class CreationGroups extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleClick() {
    this.handleChange();
    this.handleSubmit();
    console.log('alguma coisa');
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert(`Um nome foi enviado: ${this.state.value}`);
    event.preventDefault();
  }

  render() {
    return (
      <div className="component">
        <form>
          <div className="group">
            <input
              id="nameGroup"
              type="text"
              maxLength="30"
              value={this.state.value}
              onChange={this.handleChange}
              required
            />
            <i className="icon2" />
            <span className="bar" />
            <label id="name">
              <span className="lang" key="Text41">
                Group Name:
              </span>
            </label>
          </div>
        </form>

        <button id="saveGroup" onClick={this.handleClick}>
          <span>Create group</span>
        </button>
      </div>
    );
  }
}

ReactDOM.render(<CreationGroups />, document.querySelector('#app'));
<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="app"></div>

I’ve already looked at documentation and apparently agree.

But the following error is returning to me:

TypeError: Cannot read property 'target' of undefined
javascript react
  • 1

    The problem only happens when you click the button, right? That’s why you’re calling the method handleChange without passing any arguments - that is necessary. Try to change your code handleClick...

  • According to your code, it is not necessary to call handleChange when running handleClick. handleChange is called when you update the input text, and save its content in the state. By clicking, just run handleSubmit

  • Hi @Bins, I did what you told me, but I still have error Typeerror: Cannot read Property 'handleSubmit' of Undefined

  • Hello @Luizfelipe I tried to make the change you told me but I’m getting the following error: Typeerror: Cannot read Property 'handleSubmit' of Undefined

1 answer

1


Its component makes two (separate) actions: 1) updates the input text; 2) sends this text to Alert.

Therefore, you should remove this.handleChange() from the handleSubmit method. Working example:

https://codesandbox.io/s/romantic-mclean-5z2h6

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.