如何用redux\redux形式初始化独立单选按钮组组件检查的属性状态

我正在学习反应，我被卡住了。我正在尝试在"编辑"one_answers"创建"组件之间共享表单。我很难弄清楚我在初始化无线电组的已检查属性值时做错了什么。页面加载后，我可以切换单选按钮。然而，最初两者都没有被检查。

我开始认为我在表格上设置了错误的已检查属性。

编辑组件(形成父组件)：

class CompanyMasterEdit extends React.Component {
componentDidMount() {this.props.fetchCompany(this.props.match.params.companyId,this.props.match.params.companyName)}
onSubmit = (formValues) => {    this.props.editCompany(this.props.match.params.companyId, formValues)   }
render() {
return (
<div style={{ padding: 50 }}>
<h1 style={{ textAlign: "center" }}>Edit Company Master Record</h1>
<h5 style={{ textAlign: "center" }}>
<span style={{ color: "red" }}>*</span> indicates required field
</h5>
<CompanyMasterForm
initialValues={_.pick(
this.props.company,
"isKeyCompany",...
)}
onSubmit={this.onSubmit}
/>
const mapStateToProps = (state, ownProps) => {
return { company: state.companies[ownProps.match.params.companyId] }
}
export default connect(mapStateToProps, { fetchCompany, editCompany })(  CompanyMasterEdit)

形式：

class CompanyMasterForm extends React.Component {

<form
className="ui form error"
onSubmit={this.props.handleSubmit(this.onSubmit)}
>
<Field
label="Is This a Key Company?"
component={RadioGroup}
name="isKeyCompany"
required={true}
options={[
{ title: "Yes", value: true },
{ title: "No", value: false },
]}
checked={this.props.initialValues.isKeyCompany}
// onClick={this.setIsKeyCompany}
//onClick={(e) => this.setState({ isKeyCompany: e.target.checked })}
onClick={() => {this.setState((prevState) => {return {checked: !this.props.initialValues.isKeyCompany,}})
}}
/>
<button className="ui button primary">Submit</button>
</form>

RadioButtonGroup作为一个单独的组件：

class RadioGroup extends React.Component {

render() {

return (
<div className={className}>
<div className="inline fields">
<div className={labelClassName}>
<label>{label}</label>
</div>
{options.map((o) => {
const isChecked = o.value ? "true" : "false"
console.log("o.value :", o.value)
return (
<label key={o.title}>
<input
type="radio"
{...input}
value={o.value}
checked={isChecked === input.value}
/>
{o.title}
</label>
)
})}
</div>
</div>
)
}
}
// const mapStateToProps = (state) => {
//   console.log("radio group state : ", state)
//   return { isKeyCompany: state.form.companyMasterForm.values.isKeyCompany }
// }
// export default connect(mapStateToProps)(RadioGroup)
// export default connect(null)(RadioGroup)
export default RadioGroup

我有一个代码沙盒。我觉得我离它很近，在它周围跳舞，但我无法得到它。任何帮助都很感激。

几句话：

互斥的单选按钮应具有相同的name属性。所以我们可以为一组选项编写一个硬编码字符串
value道具无法确定单选按钮是否处于活动状态。这是通过checked/defaultChecked实现的。如果我们有两个以上的选项(标记每个选项)，value道具特别有用
不清楚变量input在上一个代码示例中做了什么
如果只有两个可能的值，那么最好避免将"true"和"false"作为字符串值。在这种情况下，布尔值(不带引号的true或false)更合适。这是表示您的状态的最简单方法，并且像"True"这样的拼写错误不会从裂缝中溜走(当您使用字符串时，这种拼写错误会被忽略)
如果您使用的是不受控制的组件(即输入的值没有保持在组件的状态)，如果您希望用户能够在页面加载后切换复选框，则应该使用defaultChecked而不是checked
如果你想在应用程序的其他地方重用复选框的状态，你必须使用受控组件。在这种情况下，设置状态的方式也应该略有不同(见下文)

编辑：对您下面的评论做出一些补充评论。

(您提供的代码包含语法错误，如果代码正确且尽可能少(并且格式良好)，则更容易提供帮助。)

您不应该设置您的状态onSubmit(在表单元素上)，就像您在这里所做的那样。更改应该设置为onChange(在输入元素上)，因为输入元素的状态是应用程序的相应状态，所以它们必须始终同步
实际上似乎设置您的状态的函数是editCompany减速器。因此，您应该通过从父组件(丑陋的)传递它，或者通过将输入组件连接到Redux存储(更干净的)，使它对input元素可用

class CompanyMasterEdit extends React.Component {
componentDidMount() {
const { fetchCompany, match } = this.props;
fetchCompany(match.params.companyId, match.params.companyName);
}
render() {
const { company } = this.props;
return (
<div style={{ padding: 50 }}>
<h1 style={{ textAlign: "center" }}>Edit Company Master Record</h1>
<h5 style={{ textAlign: "center" }}>
<span style={{ color: "red" }}>*</span> indicates required field
</h5>
<CompanyMasterForm initialValues={_.pick(company, "isKeyCompany")} />
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return { company: state.companies[ownProps.match.params.companyId] };
};
export default connect(mapStateToProps, { fetchCompany, editCompany })(
CompanyMasterEdit
);

class CompanyMasterForm extends React.Component {
render() {
const { initialValues } = this.props;
return (
<form className="ui form error">
<Field
label="Is This a Key Company?"
component={RadioGroup}
name="isKeyCompany"
required={true}
options={[
{ title: "Yes", value: true },
{ title: "No", value: false },
]}
checked={initialValues.isKeyCompany}
// onClick={this.setIsKeyCompany}
//onClick={(e) => this.setState({ isKeyCompany: e.target.checked })}
onClick={() => {
this.setState((prevState) => {
return { checked: !initialValues.isKeyCompany };
});
}}
/>
<button className="ui button primary">Submit</button>
</form>
);
}
}

class RadioGroup extends React.Component {
render() {
const { company, match } = this.props;
return (
<div className={className}>
<div className="inline fields">
<div className={labelClassName}>
{
label /* note: not wrapped in `<label>...</label>`, because it’s not the description of one option, but rather of the entire set. */
}
</div>
{options.map((o) => (
<label key={o.title}>
<input
type="radio"
name="isKeyCompany" // for example
checked={company.isKeyCompany === o.value} // or passed down via props
onChange={() =>
editCompany(match.params.companyId, {
...company,
isKeyCompany: o.value,
})
}
/>
{o.title}
</label>
))}
</div>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return { company: state.companies[ownProps.match.params.companyId] };
};
export default connect(mapStateToProps, { editCompany })(RadioGroup);

选项的值是文本(input.value是文本，而o.value是布尔值)。选中的属性为布尔值。除非你解决了其中一个问题，否则===永远不会完全正确。

此更改将显示一个选项。这并不是真正正确的改变。对于检查的属性，我们可能应该有一个稍微更稳健的比较。

checked={o.value == input.value}

它目前是布尔值，因为你在这里设置了

options={[
{ title: "Yes", value: true },
{ title: "No", value: false },
]}

+1关于@Nikki9696的研究，但更好的解决方案是使用严格的===检查进行比较，并将选项配置更改为具有字符串值：

options={[
{ title: "Yes", value: 'true' },
{ title: "No", value: 'false' },
]}

这是因为"true" != true(字符串值"true"不等于布尔值true，即使使用类型强制)。对于CCD_ 22和CCD_。

相关内容

最新更新

热门标签：