components: Use onInput instead of onChange

This is one of the differences between React and Preact:
https://preactjs.com/guide/v10/differences-to-react/#use-oninput-instead-of-onchange

Closes: https://todo.sr.ht/~emersion/gamja/128
This commit is contained in:
Juan Cruz Orioli 2023-01-10 11:05:57 -03:00 committed by Simon Ser
parent 081f5743be
commit c547a32282
7 changed files with 21 additions and 21 deletions

View File

@ -9,7 +9,7 @@ export default class NetworkForm extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
if (props.username) {
@ -17,7 +17,7 @@ export default class NetworkForm extends Component {
}
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -31,7 +31,7 @@ export default class NetworkForm extends Component {
render() {
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<label>
Username:<br/>
<input type="username" name="username" value=${this.state.username} required/>

View File

@ -17,7 +17,7 @@ export default class ConnectForm extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
if (props.params) {
@ -32,7 +32,7 @@ export default class ConnectForm extends Component {
}
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -147,7 +147,7 @@ export default class ConnectForm extends Component {
}
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<h2>Connect to IRC</h2>
<label>

View File

@ -8,7 +8,7 @@ export default class JoinForm extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
if (props.channel) {
@ -16,7 +16,7 @@ export default class JoinForm extends Component {
}
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -34,7 +34,7 @@ export default class JoinForm extends Component {
render() {
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<label>
Channel:<br/>
<input type="text" name="channel" value=${this.state.channel} autofocus required/>

View File

@ -22,7 +22,7 @@ export default class NetworkForm extends Component {
this.prevParams = { ...defaultParams };
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
if (props.params) {
@ -35,7 +35,7 @@ export default class NetworkForm extends Component {
}
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -85,7 +85,7 @@ export default class NetworkForm extends Component {
}
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<label>
Hostname:<br/>
<input type="text" name="host" value=${this.state.host} autofocus required/>

View File

@ -9,11 +9,11 @@ export default class RegisterForm extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
render() {
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<label>
E-mail:<br/>
<input

View File

@ -9,11 +9,11 @@ export default class SettingsForm extends Component {
this.state.secondsInTimestamps = props.settings.secondsInTimestamps;
this.state.bufferEvents = props.settings.bufferEvents;
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value }, () => {
@ -56,7 +56,7 @@ export default class SettingsForm extends Component {
}
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<label>
<input
type="checkbox"

View File

@ -9,11 +9,11 @@ export default class RegisterForm extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
handleInput(event) {
let target = event.target;
let value = target.type == "checkbox" ? target.checked : target.value;
this.setState({ [target.name]: value });
@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
render() {
return html`
<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
<p>Your account <strong>${this.props.account}</strong> has been created, but a verification code is required to complete the registration.</p>
<p>${linkify(this.props.message)}</p>