如何使用 redux \ redux-form 初始化独立的单选按钮组组件检查属性 state

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+500声望赏金。 user2315985正在从有信誉的来源寻找答案。

我正在学习反应，我被卡住了。 我正在尝试在 Edit 和 Create 组件之间共享一个表单。 我很难弄清楚我做错了什么来初始化收音机组的选中属性的值。 页面加载后，我可以切换单选按钮。 然而，最初，两者都没有被检查。

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

编辑组件（表单父组件）：

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

我有一个密码箱。 我觉得我很接近并在它周围跳舞，但我无法得到它。 任何帮助表示赞赏。

Answer 1

选项的值是文本（input.value 是文本但 o.value 是布尔值）。 选中的属性是 boolean。 === 永远不会是完全正确的，除非你修复其中的一件事。

此更改会显示一个选项。 并不是说这真的是正确的改变。 我们可能应该对已检查的属性进行更稳健的比较。

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

当前是 boolean 因为你在这里设置

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

Answer 2

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

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

那是因为"true" != true （字符串值 "true" 不等于 boolean 值true ，即使使用类型强制）。 对于"false"和false之间的比较也可以这样说。

Answer 3

几点说明：

• 互斥的单选按钮应该具有相同的name prop。 所以我们可以为一组选项写一个硬编码的字符串。
• value属性不能确定单选按钮是否处于活动状态。 这是通过checked / defaultChecked来完成的。 如果我们有两个以上的选项（对于 label 每个选项）， value属性特别有用。
• 不清楚最后一个代码示例中的变量input在做什么？
• 如果只有两个可能的值，最好避免将"true"和"false"作为字符串值。 在这种情况下，boolean（ true或false ，不带引号）更合适。 这是表示您的 state 的最简单方法，并且诸如"True"之类的拼写错误不会漏掉（当您使用字符串时，此类拼写错误 go 不会被注意到）。
• 如果您正在使用不受控制的组件（即输入的值未保留在组件的状态中），如果您希望用户能够在页面加载后切换复选框，则应使用defaultChecked而不是checked 。
• 如果您想在应用程序的其他地方重用复选框的 state，则必须使用受控组件。 在这种情况下，设置 state 也应该稍有不同（见下文）。

您的RadioGroup组件将如下所示：

class RadioGroup extends React.Component {
  state = { isKeyCompany: true } // initial value

  render() {
    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={this.state.isKeyCompany === o.value} // or passed down via props
                onChange={() => this.setState({ isKeyCompany: o.value }))
              />
              {o.title}
            </label>
          ))}
        </div>
      </div>
    )
  }
}