如何配置两个单独的单选按钮/复选框

Question

这里是ReactJS新手。我试图建立一个简单的页面，有两个独立的部分:一个单选按钮(3值)和一个复选框列表(与其他3值)。我下面的代码似乎是工作的第一部分(单选按钮)，但它是坏的复选框列表(基本上它不允许我改变选择)。我想应该是晚上的事，但我不确定。这是我从一个样本中改编的代码，只有单选按钮部分，所以我确信我做错了。

如果你还能提示如何使这两个部分在页面上看起来分开(现在它们都在同一行)，那就加分了。

import React, { Component } from 'react';
class App extends Component {
constructor() {
super();
this.state = {
capacity: 'EC2',
workload: 'web-service'
};
this.onValChange = this.onValChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
onValChange = (event) => {
this.setState({
capacity: event.target.value
});
}
onSubmitForm = (event) => {
event.preventDefault();
console.log(this.state.capacity);
console.log(this.state.workload);
}
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<label>
<input
type="radio"
value="EC2"
checked={this.state.capacity === "EC2"}
onChange={this.onValChange}/>
<span>EC2</span>
</label>
<label>
<input
type="radio"
value="Fargate"
checked={this.state.capacity === "Fargate"}
onChange={this.onValChange}/>
<span>Fargate</span>
</label>
<label>
<input
type="radio"
value="Server"
checked={this.state.capacity === "Server"}
onChange={this.onValChange}/>
<span>Server</span>
</label>

<label>
<input
type="checkbox"
value="web-service"
checked={this.state.workload === "web-service"}
onChange={this.onValChange}/>
<span>Web Service</span>
</label>
<label>
<input
type="checkbox"
value="batch-job"
checked={this.state.workload === "batch-job"}
onChange={this.onValChange}/>
<span>Batch Job</span>
</label>
<label>
<input
type="checkbox"
value="worker"
checked={this.state.workload === "worker"}
onChange={this.onValChange}/>
<span>Worker</span>
</label>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;

Answer 1

您必须为状态中的复选框维护三个独立的变量。您只能单击一个单选按钮，但可以单击一个、两个或三个复选框。以下是代码供您参考。

import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
capacity: "EC2",
isWebService: false,
isBatchJob: false,
isWorker: false
};
}
onValChange = (event) => {
this.setState({
capacity: event.target.value
});
};
onCheckValChange = (e) => {
this.setState({ [e.target.name]: e.target.checked });
};
onSubmitForm = (event) => {
event.preventDefault();
console.log("state", this.state);
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<label>
<input
type="radio"
value="EC2"
checked={this.state.capacity === "EC2"}
onChange={this.onValChange}
/>
<span>EC2</span>
</label>
<label>
<input
type="radio"
value="Fargate"
checked={this.state.capacity === "Fargate"}
onChange={this.onValChange}
/>
<span>Fargate</span>
</label>
<label>
<input
type="radio"
value="Server"
checked={this.state.capacity === "Server"}
onChange={this.onValChange}
/>
<span>Server</span>
</label>
<label>
<input
type="checkbox"
name="isWebService"
checked={this.state.isWebService}
onChange={this.onCheckValChange}
/>
<span>Web Service</span>
</label>
<label>
<input
type="checkbox"
name="isBatchJob"
checked={this.state.isBatchJob}
onChange={this.onCheckValChange}
/>
<span>Batch Job</span>
</label>
<label>
<input
type="checkbox"
name="isWorker"
checked={this.state.isWorker}
onChange={this.onCheckValChange}
/>
<span>Worker</span>
</label>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;