如何使用react onchange动态处理复选框更改

Question

你好，我如何处理onChange for multiple复选框？下面的示例允许我控制一个复选框的值。

class App extends Component {
constructor() {
super();
this.state = {
i_agree: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
this.setState({i_agree: !this.state.i_agree});
}

handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}

render() {
return (
<div>
<h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
<form onSubmit={this.handleSubmit}>

<label>
<input
type="checkbox"
defaultChecked={this.state.i_agree}
onChange={this.handleChange}
/> I Agree with this content...
</label>
<label>
<input
type="checkbox"
defaultChecked={this.state.isChecked}
onChange={this.handleChange}
/> I want to control this...
</label>

<input type="submit" value="Submit" />
</form>
</div>
);
}
}

如何设置handleChange函数来处理每个复选框的更改，而不是检查一个复选框。

参考链路

尝试1

class App extends Component {
constructor() {
super();
this.state = {
i_agree: false,
isChecked: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
this.setState({
[e.target.name]: !e.target.value
});
}

handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}

render() {
return (
<div>
<h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
<form onSubmit={this.handleSubmit}>

<label>
<input
type="checkbox"
defaultChecked={this.state.i_agree}
onChange={this.handleChange}
name="i_agree"
/> I Agree with this content...
</label>
<label>
<input
type="checkbox"
defaultChecked={this.state.isChecked}
onChange={this.handleChange}
name="isChecked"
/> I want to control this...
</label>

<input type="submit" value="Submit" />
</form>
</div>
);
}
}

我更新了onChange处理程序，并在每个标签中添加了name属性。但这并没有奏效，也没有出现任何错误。

Answer 1

我会使用checked而不是defaultChecked来控制复选框输入。

对于handleChange，您可以使用name和checked属性来更新复选框状态(您也可以对其布尔状态进行翻转，而不是使用checked(。这样，所有复选框只能有一个处理程序。

打字解决方案

import React from "react";
interface CheckboxProps {
checked: boolean;
label: string;
name: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}
// I abstracted Checkbox to a component but it's up to you
const Checkbox = ({ checked, onChange, label, name }: CheckboxProps) => (
<label>
<input
type="checkbox"
checked={checked} // use checked to have a controlled component
onChange={onChange}
name={name}
/>
{label}
</label>
);
interface AppState {
iAgree: boolean;
wantCookies: boolean;
wishList: boolean;
}
class App extends React.Component<{}, AppState> {
// constructor method is called implicit you can define state outside
// for binding methods, you can declare them as arrow functions
state = {
iAgree: false,
wantCookies: false,
wishList: false
};
// extract name and checked properties
handleChange = ({
target: { name, checked }
}: React.ChangeEvent<HTMLInputElement>) =>
this.setState({ [name]: checked } as Pick<AppState, keyof AppState>);
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
console.log(this.state);
event.preventDefault();
};
render() {
const { iAgree, wantCookies, wishList } = this.state;
return (
<div>
<h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
<form onSubmit={this.handleSubmit}>
<Checkbox
onChange={this.handleChange}
name={"iAgree"}
checked={iAgree}
label={"I agree with terms"}
/>
<Checkbox
onChange={this.handleChange}
name={"wantCookies"}
checked={wantCookies}
label={"I want more cookies"}
/>
<Checkbox
onChange={this.handleChange}
name={"wishList"}
checked={wishList}
label={"Put Me on wishlist"}
/>
<br />
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default App;

Javascript解决方案

import React from "react";
// I abstracted Checkbox to a component but it's up to you
const Checkbox = ({ checked, onChange, label, name }) => (
<label>
<input
type="checkbox"
checked={checked} // use checked to have a controlled component
onChange={onChange}
name={name}
/> { label }
</label>
)
class App extends React.Component {
// constructor method is called implicit you can define state outside
// for binding methods, you can declare them as arrow functions
state = {
iAgree: false,
wantCookies: false,
wishList: false,
};
// extract name and checked properties
handleChange = ({target: { name, checked }}) => this.setState({[name]: checked});

handleSubmit= (event) => {
console.log(this.state);
event.preventDefault();
}

render() {
const { iAgree, wantCookies, wishList } = this.state
return (
<div>
<h1>React Checkbox onChange Example - ItSolutionStuff.com</h1>
<form onSubmit={this.handleSubmit}>
<Checkbox onChange={this.handleChange} name={'iAgree'} checked={iAgree} label={'I agree with terms'} />
<Checkbox onChange={this.handleChange} name={'wantCookies'} checked={wantCookies} label={'I want more cookies'} />
<Checkbox onChange={this.handleChange} name={'wishList'} checked={wishList} label={'Put Me on wishlist'} />
<br/>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default  App

fwiw我删除了构造函数，因为它不是必需的。不过你可以保留它，这只是一种更干净的方法来声明你的类。

沙箱与实现TS：https://codesandbox.io/s/so-multi-checkboxes-ts-qz20m

沙箱与实现JS：https://stackblitz.com/edit/so-multi-checkboxes?file=src/App.js