reactjs - 如何使用 react onchange 动态处理复选框更改
问题描述
您好如何处理多个复选框的 onChange?以下示例允许我控制一个复选框的值。
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 处理程序并在每个标签中添加了名称属性。但这不起作用或引发任何错误。
解决方案
我会使用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
推荐阅读
- javascript - 如果我将 ES6“导出”放在标识符前面,为什么 JSDoc 会重复 JSON 记录?
- elasticsearch - 根据特定条件在 Elasticsearch 中建立索引之前过滤掉文档
- python - 二叉搜索树 Python 的 Floor 和 Ceil
- r - 如何在 r 中使用 for 循环从数据框中拆分文本和数字
- ruby - 如何在多个文件中找到子字符串?
- tensorflow - 评估 eval 命令时出错
- java - 如果用户输入不满足条件,再次提示用户输入(arraylist)
- ubuntu - 泊坞窗中的 LD_PRELOAD
- vba - VBA 抓取:需要对象
- user-interface - 如何在 C# 中使用和访问 ListBoxItem 的 IsVisible 属性