React Forms Events

In this chapter we will discuss how to use forms in React. HTML form elements differ from other DOM elements in React because form elements naturally keep some internal state. In HTML, form elements like ,

, and  maintain their own state and update according to user input. But in React, mutable state is typically kept in the component's state property, and can only be updated using the setState() method.

### A Simple Example

In the example we set the input value **value = {this.state.data}**. We can update the state when the input value changes. We can use the **onChange** event to listen for changes to the input and modify the state.

## React Examples

class HelloMessage extends React.Component{constructor(props){super(props); this.state = {value: 'Hello Tutorial!'}; this.handleChange = this.handleChange.bind(this); }handleChange(event){this.setState({value: event.target.value}); }render(){var value = this.state.value; return<div><h4>{value}</h4></div>; }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render();

[Try it »](#)

The above code will render an input element with the value Hello Tutorial!, and respond to user input by updating the value through the onChange event.

### Example 2

In the following example we will demonstrate how to use forms on child components. The **onChange** method will trigger state updates and pass the updated value to the child component's input **value** to re-render the interface.

You need to create an event handler (**handleChange**) in the parent component and pass it to your child component as a prop (**updateStateProp**).

## React Examples

class Content extends React.Component{render(){return(<div><h4>{this.props.myDataProp}</h4></div>); }}class HelloMessage extends React.Component{constructor(props){super(props); this.state = {value: 'Hello Tutorial!'}; this.handleChange = this.handleChange.bind(this); }handleChange(event){this.setState({value: event.target.value}); }render(){var value = this.state.value; return(<div></div>); }}const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

[Try it »](#)

### Select Dropdown menu

In React, instead of using the selected attribute, we use the value attribute on the root select tag to indicate the selected option.

## React Examples

class FlavorForm extends React.Component{constructor(props){super(props); this.state = {value: 'coconut'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }handleChange(event){this.setState({value: event.target.value}); }handleSubmit(event){alert('Your favorite flavor is: ' + this.state.value); event.preventDefault(); }render(){return(<label> Select your favorite website GoogleTutorialTaobaoFacebook</label>); }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render();

[Try it »](#)

### Multiple forms

When you have multiple input elements to handle, you can add a name attribute to each element, allowing the handler function to decide what to do based on the value of event.target.name.

## React Examples

class Reservation extends React.Component{constructor(props){super(props); this.state = {isGoing: true, numberOfGuests: 2}; this.handleInputChange = this.handleInputChange.bind(this); }handleInputChange(event){const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({: value}); }render(){return(<label> Whether to leave: </label> <label> Visitor count: </label>); }}

[Try it »](#)

* * *

## React Event

The following example demonstrates modifying data through the onClick event:

## React Examples

class HelloMessage extends React.Component{constructor(props){super(props); this.state = {value: 'Hello Tutorial!'}; this.handleChange = this.handleChange.bind(this); }handleChange(event){this.setState({value: ''})}render(){var value = this.state.value; return<div><button>Click me</button><h4>{value}</h4></div>; }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render();

[Try it »](</div><div class="post-nav"><a href="/post/html5-syntax-2.html">← Html5 Syntax</a><a href="/post/react-component-life-cycle-2.html">React Component Life Cycle →</a></div></div>
<div class="sidebar"><div class="sidebar-widget"><h3>📂 Categories</h3><ul><li><a href="/category/18.html">⚡ JavaScript</a> (1589)</li><li><a href="/category/23.html">🐘 PHP</a> (872)</li><li><a href="/category/27.html">🐍 Python3</a> (810)</li><li><a href="/category/15.html">🌐 HTML</a> (691)</li><li><a href="/category/31.html">⚙️ C#</a> (650)</li><li><a href="/category/26.html">🐍 Python</a> (594)</li><li><a href="/category/28.html">☕ Java</a> (552)</li><li><a href="/category/72.html">⚙️ PyTorch</a> (534)</li><li><a href="/category/75.html">🐧 Linux</a> (472)</li><li><a href="/category/29.html">⚙️ C</a> (432)</li><li><a href="/category/20.html">📦 jQuery</a> (406)</li><li><a href="/category/16.html">🎨 CSS</a> (377)</li><li><a href="/category/64.html">📄 XML</a> (259)</li><li><a href="/category/59.html">📦 jQuery UI</a> (231)</li><li><a href="/category/60.html">🎯 Bootstrap</a> (220)</li><li><a href="/category/30.html">⚙️ C++</a> (215)</li><li><a href="/category/58.html">🅰️ Angular</a> (205)</li><li><a href="/category/19.html">🌐 HTML DOM</a> (201)</li><li><a href="/category/50.html">🔴 Redis</a> (188)</li><li><a href="/category/90.html">📖 Web Building</a> (142)</li><li><a href="/category/57.html">💚 Vue.js</a> (141)</li><li><a href="/category/43.html">📈 R</a> (131)</li><li><a href="/category/69.html">🐼 Pandas</a> (124)</li><li><a href="/category/24.html">🗄️ SQL</a> (105)</li><li><a href="/category/76.html">⚙️ Docker</a> (86)</li><li><a href="/category/36.html">⚙️ TypeScript</a> (73)</li><li><a href="/category/85.html">⚙️ Highcharts</a> (70)</li><li><a href="/category/95.html">📖 AI Agent</a> (70)</li><li><a href="/category/56.html">⚙️ React</a> (68)</li><li><a href="/category/35.html">📖 Node.js</a> (65)</li><li><a href="/category/94.html">⚙️ Machine Learning</a> (60)</li><li><a href="/category/77.html">📁 Git</a> (59)</li><li><a href="/category/32.html">🔵 Go</a> (58)</li><li><a href="/category/83.html">📈 Markdown</a> (58)</li><li><a href="/category/68.html">🔢 NumPy</a> (55)</li><li><a href="/category/66.html">🧪 Flask</a> (54)</li><li><a href="/category/41.html">⚙️ Scala</a> (53)</li><li><a href="/category/48.html">🗄️ SQLite</a> (52)</li><li><a href="/category/116.html">📖 JSTL</a> (52)</li><li><a href="/category/106.html">⚙️ VS Code</a> (51)</li><li><a href="/category/49.html">🍃 MongoDB</a> (49)</li><li><a href="/category/42.html">📈 Perl</a> (48)</li><li><a href="/category/34.html">📈 Ruby</a> (47)</li><li><a href="/category/70.html">📊 Matplotlib</a> (47)</li><li><a href="/category/1.html">⚙️ Uncategorized</a> (46)</li><li><a href="/category/37.html">🍎 Swift</a> (46)</li><li><a href="/category/51.html">🗄️ PostgreSQL</a> (46)</li><li><a href="/category/88.html">⚙️ Data Structures</a> (46)</li><li><a href="/category/100.html">📈 Playwright</a> (46)</li><li><a href="/category/54.html">📖 iOS</a> (45)</li><li><a href="/category/25.html">🗄️ MySQL</a> (44)</li><li><a href="/category/108.html">⚙️ LangChain</a> (43)</li><li><a href="/category/67.html">📖 FastAPI</a> (40)</li><li><a href="/category/112.html">⚙️ Ionic</a> (38)</li><li><a href="/category/87.html">📈 Design Patterns</a> (37)</li><li><a href="/category/114.html">⚙️ Eclipse</a> (37)</li><li><a href="/category/17.html">🎨 CSS3</a> (34)</li><li><a href="/category/40.html">🌙 Lua</a> (34)</li><li><a href="/category/127.html">⚙️ Codex</a> (34)</li><li><a href="/category/65.html">🎸 Django</a> (32)</li><li><a href="/category/102.html">⚙️ OpenCV</a> (32)</li><li><a href="/category/33.html">📈 Rust</a> (31)</li><li><a href="/category/117.html">📖 JSP</a> (31)</li><li><a href="/category/126.html">⚙️ Claude Code</a> (31)</li><li><a href="/category/101.html">📖 Pillow</a> (30)</li><li><a href="/category/130.html">⚙️ OpenCode</a> (28)</li><li><a href="/category/131.html">📖 AI Skills</a> (27)</li><li><a href="/category/55.html">📈 Flutter</a> (26)</li><li><a href="/category/80.html">📖 Maven</a> (26)</li><li><a href="/category/61.html">🎨 Tailwind CSS</a> (25)</li><li><a href="/category/73.html">🧠 TensorFlow</a> (25)</li><li><a href="/category/118.html">📈 Servlet</a> (24)</li><li><a href="/category/39.html">📈 Dart</a> (23)</li><li><a href="/category/46.html">📖 Assembly</a> (23)</li><li><a href="/category/52.html">⚙️ Memcached</a> (22)</li><li><a href="/category/63.html">✏️ SVG</a> (22)</li><li><a href="/category/98.html">⚙️ Electron</a> (22)</li><li><a href="/category/103.html">📖 NLP</a> (22)</li><li><a href="/category/82.html">🔍 Regex</a> (21)</li><li><a href="/category/53.html">📈 Android</a> (20)</li><li><a href="/category/38.html">🟣 Kotlin</a> (19)</li><li><a href="/category/44.html">📖 Julia</a> (19)</li><li><a href="/category/92.html">📖 SOAP</a> (17)</li><li><a href="/category/99.html">📖 Selenium</a> (17)</li><li><a href="/category/104.html">📈 PowerShell</a> (17)</li><li><a href="/category/62.html">💅 Sass</a> (16)</li><li><a href="/category/89.html">📖 HTTP</a> (16)</li><li><a href="/category/45.html">📖 Zig</a> (15)</li><li><a href="/category/113.html">📖 AI</a> (15)</li><li><a href="/category/21.html">🔄 AJAX</a> (14)</li><li><a href="/category/110.html">📈 Swagger</a> (14)</li><li><a href="/category/74.html">⚙️ Scikit-learn</a> (13)</li><li><a href="/category/84.html">⚙️ ECharts</a> (13)</li><li><a href="/category/86.html">⚙️ Chart.js</a> (13)</li><li><a href="/category/128.html">⚙️ Cursor</a> (13)</li><li><a href="/category/71.html">⚙️ SciPy</a> (12)</li><li><a href="/category/91.html">📈 RDF</a> (12)</li><li><a href="/category/96.html">📖 Ollama</a> (12)</li><li><a href="/category/97.html">📖 Next.js</a> (12)</li><li><a href="/category/129.html">📖 Plotly Dash</a> (12)</li><li><a href="/category/22.html">📋 JSON</a> (11)</li><li><a href="/category/109.html">📈 RESTful API</a> (11)</li><li><a href="/category/93.html">📖 WSDL</a> (9)</li><li><a href="/category/81.html">⚙️ CMake</a> (8)</li><li><a href="/category/115.html">📈 Firebug</a> (7)</li><li><a href="/category/78.html">📖 Nginx</a> (6)</li><li><a href="/category/79.html">☸️ Kubernetes</a> (6)</li><li><a href="/category/107.html">📈 Jupyter</a> (6)</li><li><a href="/category/105.html">📖 LaTeX</a> (4)</li><li><a href="/category/111.html">📖 UniApp</a> (4)</li><li><a href="/category/47.html">🗄️ SQL Server</a> (1)</li></ul></div></div>
</div>
</div>
<footer>
<div class="container">
YouTip © 2024-2026 | <a href="/">Home</a> | Learn Technology, Build Dreams!
All content is for educational and learning purposes only.
</div>
</footer>

<script>
 // Placeholder for Google Analytics
</script>

</body>
</html>