xxxxxxxxxx
import { useState } from "react";
function MyControlledInput({}) {
const [value, setValue] = useState("");
const onChange = (event) => {
setValue(event.target.value);
};
const restInputValue = () => {
setValue("");
};
return (
<>
<div>Input value: {value}</div>
<input value={value} onChange={onChange} />
{/* This one will not reset the input value */}
<input onChange={onChange} />
<button onClick={restInputValue}>rest input value</button>
</>
);
}
export default MyControlledInput;
xxxxxxxxxx
import { useState } from 'react';
function MyControlledInput({ }) {
const [value, setValue] = useState('');
const onChange = (event) => {
setValue(event.target.value);
};
return (
<>
<div>Input value: {value}</div>
<input value={value} onChange={onChange} />
</>
);
}
xxxxxxxxxx
class Form extends Component {
constructor() {
super();
this.state = {
name: "",
};
}
handleNameChange = (event) => {
this.setState({ name: event.target.value });
};
render() {
return (
<div>
<input type="text" value={this.state.name} onChange={this.handleNameChange} />
</div>
);
}
}