e.target.value = null;
const App = () => {
const [message, setMessage] = useState('');
return (
<div>
<input
type="text"
value={message}
onChange={(event) => {
setMessage(event.target.value);
}}/>
<button
onClick={() => {
alert('check')
// clear input value
setMessage('');
}}>
Clear field
</button>
</div>
);
};
cancelCourse = () => {
document.getElementById("create-course-form").reset();
}
render() {
return (
<form id="create-course-form">
<input />
<input />
...
<input />
</form>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ''
}
this.updateState = this.updateState.bind(this);
this.clearData = this.clearData.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
clearData() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
}
render() {
return (
<>
<input type="text" value = {this.state.data} onChange = {this.updateState} ref = "myInput"/>
<button onClick={this.clearData}>CLEAR</button>
<h4>{this.state.data}</h4>
</>
);
}
}
ReactDOM.render(
<App />, document.getElementById('mountNode') );