/Javascript/React/Form action using react

Form action using react

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Source: reactjs.org

Form action using react

<textarea>
  Hello there, this is some text in a text area
</textarea>

Source: reactjs.org

Form action using react

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      value: 'Please write an essay about your favorite DOM element.'    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Source: reactjs.org

Similar codes

7 votes233 views3 answers
How to route react from laravel
Javascript React
0 vote185 views1 answer
Stop from from refresching page react
Javascript React
0 vote186 views1 answer
Ui5 React bind element
Javascript React
0 vote174 views1 answer
Nested ternaries react
Javascript React
0 vote201 views1 answer
Error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent
Javascript React
0 vote215 views1 answer
How to go to settings on next click in react native
Javascript React
15 votes218 views3 answers
Create react app and tailwind
Javascript React
12 votes202 views3 answers
Font weight react native
Javascript React
0 vote171 views1 answer
React break out of useeffect
Javascript React
5 votes185 views1 answer
Switch was not found in 'react-router-dom'
Javascript React