同一个ReactJS表单中的多个逻辑分离的单选按钮

Question

我试图建立一个非常简单的表单结构(理想情况下)一组单选按钮，一组复选框，然后另一组单选按钮。这是我正在尝试构建的表单的三个不同部分。

我想保持当前的形式，但我希望两组单选按钮是完全独立的。首先，我不确定它们是否符合当前的代码结构。其次，由于某种原因，我可以在第一组单选按钮中选择一个选项，但第二组似乎是禁用的(我既不能选择long-running也不能选择event-driven)。

我怎么才能做到呢?谢谢。

import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
customer: 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}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<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>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;

Answer 1

您应该使用您已经在复选框中实现的相同逻辑。为单选按钮设置名称属性，并通过[event.target.name]: event.target.value方法设置状态。像这样:

import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
[event.target.name]: 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}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
name="customer"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
name="customer"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
name="customer"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
name="customer"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
name="customer"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
name="customer"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<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>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="programmingmodel"
value="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="programmingmodel"
value="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;