How to create controlled forms in Reactjs?

A controlled form in React is a form where the form data is handled by a state inside a React component. React’s state becomes the “single source of truth” for the form input elements, which means the input elements are controlled by React.

Here is a simple example of a controlled form for a single input element inside a component:

```
class MyForm extends React.Component { constructor(props) { super(props); this.state = {username: ‘’};

this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({username: event.target.value}); } handleSubmit(event) { alert(‘A name was submitted: ‘ + this.state.username); event.preventDefault(); } render() { return ( ); } } ```

In above example, `username` is stored in the state and is updated every time when the user types in the input box as the `handleChange` method is called on every `onChange` event of the input box.

When users finally submit the form, the `handleSubmit` method is called which displays an alert with the `username`.

This is called a controlled component because React is controlling the value of the input field at all times.