React IV - Handler

Handler

class Form extends React.Component {
  handleSubmit = () => {
    event.preventDefault();
  };
  
  render(){
  return(
    <form action="" onSubmit={this.handleSubmit}>
      <input type="text" placeholder="type"/>
      <button>Send</button>
    </form>

    );
  }
};

Reference

class Form extends React.Component {
  userInput = React.createRef();
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(
      this.userInput.current.value
    )
  };
  
  render(){
  return(
    <form action="" onSubmit={this.handleSubmit}>
      <input type="text" placeholder="type" ref={this.userInput}/>
      <button>Send</button>
    </form>

    );
  }
};

State

Is the better option

class Form extends React.Component {
  state = { userName : '' } 
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(
      this.state.userName
    );
  };
  
  render(){
  return(
    <form action="" onSubmit={this.handleSubmit}>
      <input type="text" placeholder="type" value={this.state.userName} 
        onChange={ event => this.setState( { userName : event.target.value} ) }
        />
      <button>Send</button>
    </form>

    );
  }
};