代码之家  ›  专栏  ›  技术社区  ›  Michael Emerson

ReduxForm-如何使用单手更改功能处理单选按钮上的更改

  •  0
  • Michael Emerson  · 技术社区  · 6 年前

    我在Laravel项目中使用Redux表单(实现React 15.4.2),我所使用的表单包含几个单选按钮。我需要一个 handleChange 函数的作用是为了记住所检查的内容(如果它们是从以前的值更改的或是第一次选择的),但我不想为每个单选按钮编写单独的一个,也不想为每个单选按钮实现一个庞大的if-else规则集来处理每个规则。

    这是我的一个字段(只有“是”值):

    <input type="radio" onChange={this.handleChange.bind(this, 'maintain_licence', 'yes')} checked={maintain_licence.value === 'yes'} id="maintain-licence-yes" value="yes" name="maintain_licence" /><span>Yes</span>
    

    这就是我所拥有的一个关于变化的单选按钮,基于调用的单选按钮 maintain_licence 与以下人员互动:

    handleChange(fieldName, value) {
        if(fieldName === 'maintain_licence') {
            this.props.fields.maintain_licence.onChange(value);
        }
    }
    

    这很好——不过,由于我的身体里有大约20台收音机,我可以想象这个功能会变得相当长。理想情况下,我想要类似的东西:

    handleChange(fieldName, value) {
       this.props.fields.fieldName.onChange(value);
    }
    

    但是,当它试图找到一个实际名为“fieldname”的字段时,它抛出了一个错误,说明它无法运行 onChange 在未定义的值上。

    基本上,我只需要找到一种使用单个函数来处理所有单选按钮上的更改的方法,但我不知道如何做到这一点。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Frédéric Bégin    6 年前

    可以使用属性访问器获取所需的属性。类似:

    handleChange(fieldName, value) {
        this.props.fields[fieldName].onChange(value);
    }
    

    参考文献: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors